React TypeScript中向函数组件传递自定义接口数组的问题

问题根源 #

React 函数组件的 props 参数必须是对象类型，不能直接传入数组。你最初直接定义组件接收 IStoreItem[] 类型的参数，TypeScript 报错正是因为违反了这个规则。而你后来用接口包裹后需要 items.items 调用 map，大概率是接口定义或传参时多嵌套了一层对象。

简洁解决方案 #

方案1：定义极简Props接口（推荐） #

直接定义只包含数组属性的Props接口，解构后直接使用数组：

// 定义Props类型
interface ListItemsProps {
  items: IStoreItem[];
}

// 组件实现
const ListItems = ({ items }: ListItemsProps) => {
  return (
    <div className="item-list">
      {items.map(item => (
        <div key={item.id} className="item">
          {/* 渲染单个Item内容，比如{item.name}、{item.price} */}
        </div>
      ))}
    </div>
  );
};

调用组件时直接传递数组：

// 主组件Store中调用
import storeItems from '../items.json';

const Store = () => {
  return (
    <div className="store">
      <h1>商品列表</h1>
      <ListItems items={storeItems} />
    </div>
  );
};

这种写法符合React组件规范，代码清晰，不需要额外嵌套。

方案2：用类型别名简化Props定义 #

如果觉得接口写法繁琐，可以用类型别名替代：

type ListItemsProps = {
  items: IStoreItem[];
};

const ListItems = ({ items }: ListItemsProps) => {
  // 渲染逻辑同上
};

方案3：直接传递数组（不推荐） #

如果想绕过对象Props的限制，可以把组件写成普通函数（而非标准React组件），直接接收数组参数：

const ListItems = (items: IStoreItem[]) => {
  return (
    <div className="item-list">
      {items.map(item => (
        <div key={item.id} className="item">
          {/* 渲染内容 */}
        </div>
      ))}
    </div>
  );
};

调用时直接执行函数：

{ListItems(storeItems)}

⚠️ 注意：这种写法不是标准React组件，无法使用Hooks（如useState、useEffect），也无法接收其他Props，仅适合简单的纯渲染场景，不推荐在生产环境使用。

为什么之前需要items.items？ #

你之前的写法需要items.items，大概率是以下两种情况之一：

1. Props接口多嵌套了一层：

// 错误示例：多了一层嵌套
interface StoreItemsProps {
  items: {
    items: IStoreItem[];
  };
}

2. 传参时错误地将数组包裹在对象里：

// 错误示例：多余的嵌套
<ListItems items={{ items: storeItems }} />

修正这两点后，就能直接使用items.map了。

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