TypeScript React组件传参类型不匹配：EntriesProps缺失数组属性

问题根源 #

这不是类数组对象导致的问题，纯粹是类型定义层级错误：

• Entries组件的EntriesProps要求entries是PullDown[]数组类型
• 但你在InputProps里把entries定义成了EntriesProps类型，导致Input组件传给Entries的props.entries是一个EntriesProps对象，而非需要的数组，所以TypeScript报错该对象缺少数组的length、pop等方法。

修复方案 #

有两种修复方式，选更符合业务逻辑的一种即可：

方式一：修正InputProps的类型定义（推荐） #

直接把InputProps里的entries类型改成PullDown[]，和Entries组件需要的类型对齐：

// types.ts
interface PullDown {
    id: number;
    type: string;
    options: string[];
}

interface EntriesProps {
    entries: PullDown[];
}

// 修改这里，entries类型改为PullDown[]
interface InputProps {
    entries: PullDown[],
}

方式二：传递时取嵌套的entries属性 #

如果Input组件确实需要接收完整的EntriesProps对象，那在传参时要提取对象里的entries数组：

// Input组件里修改传参行
<Entries entries={props.entries.entries}></Entries>

验证 #

修改后，Input传递的参数类型和Entries组件要求的PullDown[]完全匹配，类型错误会消失，props.entries.map也能正常执行。

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