Next.js15+TypeScript嵌套导航构建报错：类型不匹配问题

核心错误原因 #

1. 类型定义不匹配：menuItemProps中subMenuItems被错误定义为menuListProps | undefined，但实际菜单数据里subMenuItems是menuItemProps[]类型的数组，同时MenuContent组件接收的是passedMenuItems: menuItemProps[]，导致类型传参冲突。
2. 组件传参错误：报错行的MenuContent传参写的是subMenuItems={subMenuItems}，但MenuContent的props只有passedMenuItems字段，传参字段名错误。
3. 组件返回值缺失：MenuItem组件中当hideForHamburgerMenu为true时，没有返回任何JSX元素，违反TypeScript的类型检查规则。

具体修复步骤 #

1. 修正类型定义 #

将menuItemProps里的subMenuItems类型改为子菜单数组，删除冗余的menuListProps包裹：

// 移除不必要的menuListProps包裹，直接定义子菜单数组类型
type menuItemProps = {
    id: number;
    title: string;

    shortTitle?: string;
    description?: string;
    shortDescription?: string;
    path?: string;
    image?: string;
    icon?: string;

    hideForHamburgerMenu?: boolean;

    // 修正为子菜单数组，允许undefined
    subMenuItems?: menuItemProps[];
}

// MenuContent的props类型保持接收数组即可
type menuListProps = {
    passedMenuItems: menuItemProps[];
}

2. 修正组件传参与空值处理 #

在MenuItem组件中，修正MenuContent的传参字段，并处理subMenuItems可能为undefined的情况：

function MenuItem (props: menuItemProps){
    const { id, title, subMenuItems, hideForHamburgerMenu } = props;

    // 处理hideForHamburgerMenu为true的情况，返回空元素
    if (hideForHamburgerMenu) {
        return null;
    }

    // 判断subMenuItems是否存在且有内容
    if (subMenuItems && subMenuItems.length > 0) {
        return (
            <li key={id}>
                <h2>{title}</h2>
                // 正确传递passedMenuItems字段
                <MenuContent passedMenuItems={subMenuItems} />
            </li>
        )
    } else {
        return (
            <li key={id}>
                <h2>{title}</h2>
            </li>
        )
    }
}

3. 完善MenuContent组件的类型安全 #

给passedMenuItems设置默认空数组，增强类型安全：

function MenuContent(props: menuListProps){
    // 解构时设置默认空数组，避免空值报错
    const { passedMenuItems = [] } = props;

    const toRender = passedMenuItems.map(menuItem => <MenuItem key={menuItem.id} {...menuItem} />);

    return (
        <ul>
            {toRender}
        </ul>
    )
}

额外注意点 #

• 原报错行的subMenuItems={subMenuItems}是字段名错误，MenuContent只接受passedMenuItems作为props字段，必须修正。
• 菜单数据中的subMenuItems数组即使为空，也要保证类型是menuItemProps[]而非其他类型，避免类型推断错误。

内容的提问来源于stack exchange，提问作者Tomasz