React+TypeScript自定义组件设置key时出现类型错误的问题

问题原因 #

key 是 React 内部用于识别列表元素唯一性的特殊属性，它不会被作为组件的 props 传递给自定义组件。你的自定义组件 Props 类型定义中并没有包含 key 字段，因此直接将 key 作为组件属性传入时，TypeScript 会触发类型不匹配的报错。

正确解决方案 #

1. 正确放置 key 属性 #

在使用 map 生成组件列表时，将 key 直接写在组件标签上，但不要将其作为组件 props 的一部分（组件内部不需要接收这个属性）：

{yourObjectArray.map((item, index) => (
  <YourCustomComponent
    key={index} // 仅给 React 内部使用，不会传入组件
    imageSource={item.imageSource}
    target={item.target}
    title={item.title}
    hasGap={item.hasGap}
  />
))}

2. 不要在组件 Props 中添加 key 字段 #

不要试图在自定义组件的 Props 类型中添加 key 属性，因为 React 永远不会把这个值传递给组件内部，这样做只会混淆逻辑，没有实际意义。

3. 关于 ESLint 和运行时的矛盾 #

• 编辑器的红色波浪线是 TypeScript 类型检查的正确提示，因为你试图传递一个组件 Props 中不存在的属性。
• 移除 key 后出现的"缺少 key"警告，是 ESLint react/jsx-key 规则的提示，这是 React 列表渲染的要求——必须为每个列表元素提供唯一的 key，两者并不冲突。

验证你的简单示例 #

对于你给出的测试组件，正确的用法是如果它出现在列表中才需要加 key，单独使用时不需要传递 key：

// 单独使用时，无需传 key
<MissingKeyComponent />

// 在列表中使用时，key 写在组件标签上
{[1,2,3].map(num => (
  <MissingKeyComponent key={num} />
))}

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