Tanstack/React-Table + TypeScript：表格行路由跳转类型错误排查

1. 泛型绑定缺失：React-Table的useTable钩子默认会将行数据类型推断为unknown或未指定的泛型TData，如果没有显式把TData绑定到你定义的Payment类型，TypeScript无法识别行数据包含id字段，从而触发ESLint类型校验错误。
2. 错误获取行数据字段：如果直接使用row.values.id，但表格列配置中未显式包含id列，row.values只会包含配置过的列字段，自然找不到id；而row.original才是原始的Payment数据实例，包含所有定义的字段。

1. 显式绑定useTable的泛型参数 #

初始化表格时，将泛型TData指定为Payment，让TypeScript明确行数据类型：

import { useTable, Column } from '@tanstack/react-table';
import { Payment } from './your-types-file';

// 定义列时绑定Payment类型，强化类型校验
const columns: Column<Payment>[] = [
  {
    accessorKey: 'amount',
    header: '支付金额',
  },
  {
    accessorKey: 'status',
    header: '支付状态',
  },
  // 即使不渲染id列，也不影响原始数据的类型识别
];

export default function PaymentsTable() {
  const paymentsData: Payment[] = fetchPayments(); // 你的数据获取逻辑
  const table = useTable<Payment>({ columns, data: paymentsData });
  
  // ...其他表格逻辑
}

2. 正确获取行数据中的id字段 #

在行点击事件中，使用row.original获取原始的Payment数据，而非row.values：

{table.getRowModel().rows.map(row => (
  <tr 
    key={row.id}
    onClick={() => router.push(`/payments/${row.original.id}`)}
  >
    {row.getVisibleCells().map(cell => (
      <td key={cell.id}>{cell.renderCell()}</td>
    ))}
  </tr>
))}

1. 类型安全的路由跳转：如果使用Next.js等框架，建议利用框架提供的类型安全路由能力，避免硬编码路径导致的潜在错误：

import { useRouter } from 'next/navigation';

const router = useRouter();
const handleRowClick = (payment: Payment) => {
  router.push(`/payments/${payment.id}`);
};

// 在行中调用：
<tr onClick={() => handleRowClick(row.original)}>

2. 封装行点击逻辑：将行点击抽离为独立函数，明确接收Payment类型参数，让类型校验更清晰，也便于后续逻辑扩展：

const handleRowClick = (payment: Payment) => {
  // 可添加前置校验，比如判断id是否存在
  if (!payment.id) return;
  router.push(`/payments/${payment.id}`);
};

3. 启用严格类型模式：在tsconfig.json中开启strict: true，确保所有表格相关配置（列、钩子）都绑定正确的泛型类型，提前发现类型问题，避免运行时隐患。

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