React中如何传递对象数组参数给组件？TypeScript类型错误解决

错误原因 #

你遇到的类型错误，核心问题是TreeSettings组件的Props类型定义错误——它被声明成了menuItems[]数组类型，但你实际传递的是一个包含data属性的对象，两者类型不兼容，所以TS抛出了类型不匹配的报错。

具体修复步骤 #

1. 给TreeSettings组件定义正确的Props接口
   在TreeSettings.tsx中，先明确组件接收的Props结构：

   // 定义组件需要的Props类型
   interface TreeSettingsProps {
     data: menuItems[];
   }
   

2. 修正组件的参数类型
   把组件的参数从数组类型改成上面定义的接口类型，同时解构出data属性：

   const TreeSettings = ({ data }: TreeSettingsProps) => {
     // 后续代码里用data代替原来直接使用的props数组
     return (
       // 你的组件渲染逻辑，比如遍历data数组
       <div>
         {data.map(item => (
           <div key={item.id}>{item.label}</div>
         ))}
       </div>
     );
   };
   

3. 保持Settings.tsx的传参方式不变
   你原来在Settings.tsx里的传参写法<TreeSettings data={menuItems} />是正确的，现在类型匹配后就不会再报错了。

为什么之前会报错？ #

之前你把TreeSettings的Props类型设成了menuItems[]，相当于TS认为这个组件需要直接接收一个数组作为Props（比如写法是<TreeSettings {...menuItems} />），但你实际传的是带data属性的对象，类型完全不匹配，所以触发了2322类型错误。

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