如何实现TypeScript通用表格组件？解决react-table类型报错

问题根源 #

useTable 的 data 参数要求类型为 readonly object[]，但你定义的泛型 T 没有任何约束，TypeScript 无法保证 T 一定是对象类型，因此抛出类型不兼容的报错。

解决方案 #

通过给泛型添加约束、优化类型定义来彻底解决问题：

1. 给泛型 T 添加对象类型约束：确保 T 必须继承自 object，这样 T[] 就能满足 readonly object[] 的类型要求。
2. 替换 columns 的 any 类型：使用 React-Table 内置的 Columns<T> 类型，让列配置与数据类型强关联，获得精准的类型检查和代码提示。

修改后的完整代码 #

import { Price_Type } from "~/data/db_action.server";
import { useTable, Columns } from 'react-table';

export interface ITable<T extends object> {
  columns: Columns<T>;
  data: T[];
  onClick: (price_id: string) => void;
}

export default function Table<T extends object>({
  columns,
  data,
  onClick
}: ITable<T>) {
  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
  } = useTable({
    columns,
    data
  });
  return (
    <table {...getTableProps()}>
      <thead>
        {headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render("Header")}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...getTableBodyProps()}>
        {rows.map((row) => {
          prepareRow(row);
          return (
            <tr className="transition" {...row.getRowProps()} onClick={() => row.original.id && onClick(row.original.id)}>
              {row.cells.map(cell => {
                return <td className="transition" {...cell.getCellProps()}>{cell.render("Cell")}</td>;
              })}
            </tr>
          );
        })}
      </tbody>
    </table>
  )
}

关键改动说明 #

• T extends object：强制泛型 T 必须是对象类型，从根源消除了类型不匹配的问题。
• Columns<T>：替代 any 后，TypeScript 会自动校验列配置的 accessor 是否与 T 的属性匹配，避免写错字段名，同时提供更精准的代码提示。
• 移除了无用的索引参数 i，简化代码逻辑。

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