React TypeScript中HTML标签id属性使用报错的解决咨询

问题原因 #

该错误通常是因为使用了错误的HTML元素属性类型定义，或是React类型声明存在版本兼容问题，导致TypeScript无法识别div原生支持的id属性。

解决方案 #

1. 使用正确的Div元素属性类型 #

如果是自定义组件，需明确使用React.DivHTMLAttributes<HTMLDivElement>作为Props类型，它包含了div元素的所有原生属性（包括id）：

import React from 'react';

// 正确定义Div组件的Props类型
type CustomDivProps = React.DivHTMLAttributes<HTMLDivElement>;

const CustomDiv: React.FC<CustomDivProps> = ({ id, className, children }) => {
  return <div id={id} className={className}>{children}</div>;
};

2. 更新React类型声明包 #

老旧版本的@types/react或@types/react-dom可能存在类型定义缺失，执行以下命令更新到最新兼容版本：

npm install @types/react@latest @types/react-dom@latest --save-dev

3. 检查自定义类型声明文件 #

查看项目中的*.d.ts类型声明文件，确认是否错误覆盖了HTMLAttributes类型导致id属性被移除。若存在此类代码，需修正为继承原有属性：

// 错误示例（会覆盖原有属性）
declare module 'react' {
  interface HTMLAttributes<T> {
    // 自定义属性
  }
}

// 正确示例（保留原有属性并扩展）
declare module 'react' {
  interface HTMLAttributes<T> extends React.HTMLAttributes<T> {
    // 你的自定义属性
  }
}

4. 验证TS配置文件 #

确保tsconfig.json的compilerOptions包含必要配置：

{
  "compilerOptions": {
    "jsx": "react-jsx", // 根据React版本调整为"react"或"react-jsx"
    "lib": ["dom", "dom.iterable", "es2015"], // 必须包含dom库以支持HTML元素类型
    "strict": true // 开启严格类型检查有助于提前定位问题
  }
}

内容的提问来源于stack exchange，提问作者Иван Михайлютин