TypeScript报错：KeyValuesType不可分配给keyValueType，string[][]缺少索引签名

问题原因 #

1. 类型定义不匹配：你在MainTable内定义的KeyValuesType（字符串二维数组类型）和Columns组件入参声明的keyValueType是两个完全独立的类型。从报错提示看，你大概率是将keyValueType定义为了带索引签名的接口类型，而TS对类型别名和自定义接口的赋值校验逻辑不同，会触发索引签名缺失的错误。
2. JSX语法错误：Grid.Row内部写了多余的return关键字，会导致运行时报错。

修复方案 #

方案1：直接统一入参类型 #

直接将Columns组件的props类型改为和传入值一致的string[][]即可：

interface ColumnProps {
  keyValues: string[][];
}
// 循环项记得加key属性避免React警告
function Columns({ keyValues }: ColumnProps): ReactElement {
  return keyValues.map((el, index) => {
    return <Grid.Column key={index}>{el[0]}</Grid.Column>;
  });
}

同时删掉Grid.Row内多余的return：

<Grid.Row columns={10}>
  <Columns keyValues={keyValues} />
</Grid.Row>

方案2：复用已有类型定义 #

如果要复用你之前定义的KeyValuesType，可以把该类型提到组件外部的公共作用域：

// 提至全局作用域，两个组件均可访问
type KeyValuesType = string[][];

const MainTable: React.FC = () => {
  // 原有逻辑保持不变
}

interface ColumnProps {
  keyValues: KeyValuesType;
}
function Columns({ keyValues }: ColumnProps): ReactElement {
  return keyValues.map((el, index) => {
    return <Grid.Column key={index}>{el[0]}</Grid.Column>;
  });
}

可选优化：更严格的元组类型 #

因为你的每一项都是固定两个字符串的数组，可以将类型定义为元组获得更精准的校验：

type KeyValuesType = [key: string, value: string][];

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