NextJS中Navbar组件Props类型报错：Property不存在于对应类型

问题描述 #

在我的Next.js应用中，我创建了一个Navbar组件，并通过props传递菜单项：

<Navbar navitems={navigationItems} />

其中navigationItems是一个对象数组。

在Navbar组件中，我编写了如下代码：

export interface INavBarItem {
   id: string;
   text: string;
   path: {
     slug: string;
   };
}

export type INavBar = INavBarItem[];

const Navbar: React.FC<INavBar> = ({ navitems }) => { ... }

现在我遇到了如下错误：

Type error: Type '{ navitems: any; }' is not assignable to type 'IntrinsicAttributes & INavBar'.Property 'navitems' does not exist on type 'IntrinsicAttributes & INavBar'.

请问我哪里出错了？

错误原因及修复方案 #

问题出在组件props的类型定义逻辑错误：

• React.FC的泛型参数需要是组件props的接口类型，但你直接传入了INavBar（这是一个数组类型INavBarItem[]）。此时React会把组件props当成数组来解析，自然找不到navitems这个属性。

修复步骤：

1. 定义专门的props接口，包含navitems字段，类型指定为INavBar：

export interface INavBarProps {
  navitems: INavBar;
}

2. 将React.FC的泛型替换为这个props接口：

const Navbar: React.FC<INavBarProps> = ({ navitems }) => { ... }

或者也可以省略React.FC，直接在组件参数上定义类型：

const Navbar = ({ navitems }: INavBarProps) => { ... }

这样TypeScript就能正确识别navitems这个props属性，错误即可消除。

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