TypeScript报错：HTMLAttributes<HTMLLIElement>无key属性，但props实际包含该属性

React 的 key 是专门用于列表项身份识别的特殊属性，不会被纳入组件的标准 props 类型定义（比如 HTMLAttributes<HTMLLIElement>）。虽然你通过 console.log 能看到它，但这是 React 内部处理时临时附加的属性，TypeScript 的类型系统并不会将其包含在常规的 HTML 元素属性类型中，因此会抛出类型错误。

1. 删除无用的解构代码 #

你的代码里解构出 key 后并没有实际使用它，直接删掉这一行就能消除报错：

// 移除该行即可解决类型错误
// const { key } = props;

因为你已经通过 <li {...props}> 将所有 props（包括 key）传递给了列表项，React 会正确处理这个特殊属性，不需要单独提取。

2. 若确实需要获取 key 的值 #

如果后续要用到这个值，可以通过两种方式绕过类型检查：

方式一：类型断言

将 props 断言为包含 key 的复合类型：

const { key } = props as { key: string } & HTMLAttributes<HTMLLIElement>;

方式二：从数据源生成 key

既然 key 的值对应 option 的地址信息，你可以直接从 option 对象中获取，无需依赖 props：

const key = option.structured_formatting.main_text;
// 若有唯一标识字段，也可以用该字段生成 key

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