Thank you for your effort. I have simplified my code and now it has started working. The following solution compiles and builds correctly, but I struggled with it until the last minute. Only after I used

subMenuItems?: NavItemProps["menuItem"][] // instead of subMenuItems?: NavItemProps[]

and wrap into menuItem inside the type definition it start compiling correctly. Do you see any better options on how to write it better or redesign the menuItem data framework?

type NavItemProps = {
  menuItem: {
    id: number;
    title: string;

    hideForHamburgerMenu?: boolean;

    subMenuItems?: NavItemProps["menuItem"][];
  }
}

function NavItem (props: NavItemProps){
    
    const { menuItem } = props;
    const { id, title, subMenuItems, hideForHamburgerMenu } = menuItem;

    if (hideForHamburgerMenu)
        return (<></>)
    else
        return (

            <li key={id}>

                <h2>{title}</h2>

                {subMenuItems && (
                  <ul>
                    {subMenuItems.map((subItem) => (
                      <NavItem key={subItem.id} menuItem={subItem} />
                    ))}
                  </ul>

                )}
            </li>
            )
}

export default function MobileAsideMainMenu(){

    return(
        <>
            <nav>
                <ul>
                    {menuItems.map((menuItem) => (
                        <NavItem key={menuItem.id} menuItem={menuItem} />
                    ))}
                </ul>
            </nav>
        </>

    )
}