TypeScript映射数组对象时Key类型不兼容问题求助

问题出在你接口里用了大写的String类型，而React的Key类型只接受原始类型的string（小写s）或number。TypeScript中String是字符串包装对象类型，和原始string不是一回事，所以会触发类型不兼容的报错。

最直接的修复方式：修正接口类型 #

把接口里的String全部改成string，因为uuidv4()返回的本身就是原始字符串类型，这样类型就能完全匹配：

interface Goal {
  id: string; // 把String改成string
  title: string; // 同理修改title
  importance: number;
  expDate: Date;
  minorGoal?: MinorGoal[]; // 建议接口名首字母大写，符合TS规范
}

goals.map((goal: Goal) => (
  <SinglePurpose
    key={goal.id}
    goal={goal}
  />
))

临时兼容方案（不推荐，仅当无法修改接口时使用） #

如果因为某些原因不能修改接口定义，可以把goal.id转换为原始字符串类型：

goals.map((goal: Goal) => (
  <SinglePurpose
    key={goal.id.toString()} // 调用toString()转原始字符串
    goal={goal}
  />
))
// 或者用String()强制转换
key={String(goal.id)}

为什么之前的方法没用？ #

• 用index当key：React官方明确不推荐，会导致列表项状态错乱、渲染性能下降，尤其是在列表有增删排序操作时问题更明显。
• 重写Key类型：这属于破坏React的类型约定，不仅会丢失类型安全，还可能引发其他隐藏问题，完全不可取。

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