Next.js中TSX组件tr标签key属性TypeScript报错排查

问题代码 #

interface User {
  id: number;
  name: string;
  email: string;
}
const UserTable = async () => {
  const res = await fetch("https://jsonplaceholder.typicode.com/users");
  const users: User[] = await res.json();
  return (
    <table className="table table-bordered">
      <thead>
        <tr>
          <td>Name</td>
          <td>Email</td>
        </tr>
      </thead>
      <tbody>
        {users.map((user) => (
          <tr key={user.id}>
            <td>{user.name}</td>
            <td>{user.email}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

报错信息 #

Type '{ children: Element[]; key: number; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>'.
  Property 'key' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>'.

原因及解决方法 #

key是React的特殊标识属性，不属于HTML元素的标准属性集合，因此TypeScript的HTMLAttributes类型里没有定义这个属性。你的UserTable是一个async组件（Next.js中默认是Server Component），此时TypeScript的类型校验会严格按照HTML元素属性规则检查，从而抛出错误。

解决方法1：转为客户端组件 #

在组件顶部添加'use client'指令，切换为客户端组件后，React的类型系统会自动处理key这个特殊属性，不会再报错。客户端组件建议用useEffect或数据请求库（如SWR、React Query）获取数据：

'use client';

import { useState, useEffect } from 'react';

interface User {
  id: number;
  name: string;
  email: string;
}
const UserTable = () => {
  const [users, setUsers] = useState<User[]>([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(data => setUsers(data));
  }, []);

  return (
    <table className="table table-bordered">
      <thead>
        <tr>
          <td>Name</td>
          <td>Email</td>
        </tr>
      </thead>
      <tbody>
        {users.map((user) => (
          <tr key={user.id}>
            <td>{user.name}</td>
            <td>{user.email}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

解决方法2：保留Server Component并兼容类型 #

如果需要保留Server Component，可以通过以下方式规避类型错误：

• 确保你的@types/react版本在18.0.0以上，与当前Next.js版本兼容（Next.js 13+需要React 18）；
• 临时用类型注释忽略错误（仅应急使用，不推荐长期这么做）：

<tr key={user.id} // @ts-ignore
>

内容的提问来源于stack exchange，提问作者Berk Takıt