TypeScript数组解构类型推断冲突：React组件传参类型不匹配

问题根源 #

你遇到的错误是因为TypeScript默认把data推断为(string[])[][]——也就是每个子数组是任意长度的字符串数组。这意味着解构[a,b,c]时，TypeScript无法保证每个位置都有值，所以a/b/c的类型会是string | undefined，但你的ShowItem组件要求props是必填的string，因此类型不兼容。

三种可行解决方案 #

1. 给data指定明确的元组数组类型

直接定义data为固定长度3的字符串元组数组，让TypeScript明确每个子数组都有3个字符串元素：

const data: [string, string, string][] = [
    ['a1', 'b1', 'c1'],
    ['a2', 'b2', 'c2'],
]

这样在map里解构[a,b,c]时，三个变量都会被推断为string类型，直接匹配组件props。

2. 在map回调中给解构数组指定类型

如果不想修改data的全局类型，可以在遍历的时候给当前元素指定元组类型：

function ShowAllItems(){
    return <div>
        {data.map(([a,b,c]: [string, string, string], i) => <ShowItem a={a} b={b} c={c} key={i}/> )}
    </div>
}

这种方式只作用于当前遍历的元素，不会影响data本身的类型推断。

3. 使用as const断言让数组变为只读元组

如果你的data是固定不变的常量，可以用as const让TypeScript推断出最精确的字面量类型：

const data = [
    ['a1', 'b1', 'c1'],
    ['a2', 'b2', 'c2'],
] as const;

此时a/b/c的类型会是'a1' | 'a2'、'b1' | 'b2'等字面量类型，这些都是string的子类型，完全满足ShowItem的props要求，同时还能保证data的结构不会被意外修改。

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