How to access nested navigationItemUrl text property in Sanity query map?

This is a JavaScript/TypeScript data traversal question rather than a Sanity-specific issue. Looking at your data structure, you need to access nested properties within the items array.

Based on your data structure, navigationItemUrl.internalLink contains the text property you want. Here's how to access it:

{navs.map((nav: any) => (
  <div key={nav._id}>
    <h3>{nav.title}</h3>
    {nav.items?.map((item: any) => (
      <div key={item._key}>
        {item.navigationItemUrl?.internalLink?.text}
      </div>
    ))}
  </div>
))}

The key points:

• You need to map over nav.items (the array of navigation items)
• Each item has a navigationItemUrl object
• Inside that is internalLink which contains your text property
• Use optional chaining (?.) to safely access nested properties
• Use item._key as the key since each navigation item has that unique identifier

If you want to create actual links, you might do something like:

{navs.map((nav: any) => (
  <nav key={nav._id}>
    <h3>{nav.title}</h3>
    <ul>
      {nav.items?.map((item: any) => (
        <li key={item._key}>
          <a href={item.navigationItemUrl?.internalLink?.text}>
            {item.text || item.navigationItemUrl?.internalLink?.text}
          </a>
        </li>
      ))}
    </ul>
  </nav>
))}

TypeScript tip: Instead of using any, consider using Sanity TypeGen to generate proper types for your schema. This would give you autocomplete and type safety for these nested structures, making it much easier to work with complex data like this navigation structure.