使用@tanstack/react-table创建列时遇AccessorKeyColumnDef类型兼容错误

问题描述 #

使用@tanstack/react-table创建表格列时触发TypeError：Type 'AccessorKeyColumnDef<Reservation, number>' is not assignable to type 'ColumnDef<Reservation>'。推测是不同列的单元格值类型（number/string）导致类型不兼容，尝试多种类型定义均无效。

类型定义与列配置代码 #

type Reservation = {
  id: number
  shift: string
  quantity: number
}

const columnHelper = createColumnHelper<Reservation>()

// 定义列时出现错误
const columns = useMemo<ColumnDef<Reservation>[]>(
  () => [
    columnHelper.accessor('id', {
      header: () => 'S/N',
      cell: info => info.getValue(),
    }),
    columnHelper.accessor('shift', {
      header: 'Shift',
    }),
    columnHelper.accessor('quantity', {
      header: () => 'Quantity',
      cell: info => info.renderValue(),
    }),
  ],
  [],
)

数据结构 #

export const data = [
  {
    id: 1,
    shift: 'BREAKFAST',
    quantity: 1,
  },
  {
    id: 2,
    shift: 'LUNCH',
    quantity: 4,
  }
  // ... 更多数据
]

完整错误信息 #

Type 'AccessorKeyColumnDef<Reservation, number>' is not assignable to type 'ColumnDef<Reservation>'.
 Type 'AccessorKeyColumnDefBase<Reservation, number> & Partial<StringHeaderIdentifier>' is not assignable to type 'ColumnDef<Reservation>'.
   Type 'AccessorKeyColumnDefBase<Reservation, number> & Partial<StringHeaderIdentifier>' is not assignable to type 'AccessorKeyColumnDefBase<Reservation, unknown> & Partial<IdIdentifier<Reservation, unknown>>'.
      Type 'AccessorKeyColumnDefBase<Reservation, number> & Partial<StringHeaderIdentifier>' is not assignable to type 'AccessorKeyColumnDefBase<Reservation, unknown>'.
        Types of property 'footer' are incompatible.
          Type 'ColumnDefTemplate<HeaderContext<Reservation, number>> | undefined' is not assignable to type 'ColumnDefTemplate<HeaderContext<Reservation, unknown>> | undefined'.
            Type '(props: HeaderContext<Reservation, number>) => any' is not assignable to type 'ColumnDefTemplate<HeaderContext<Reservation, unknown>> | undefined'.

环境版本 #

• @tanstack/react-table: ^8.20.1
• typescript: ^5

解决方案 #

该错误源于TypeScript无法自动将不同值类型的AccessorKeyColumnDef统一为ColumnDef<Reservation>数组类型，可通过以下方式解决：

方法1：自动推导数组类型 #

移除useMemo的显式类型标注，让TypeScript自动推导列数组的联合类型：

const columns = useMemo(
  () => [
    columnHelper.accessor('id', {
      header: () => 'S/N',
      cell: info => info.getValue(),
    }),
    columnHelper.accessor('shift', {
      header: 'Shift',
    }),
    columnHelper.accessor('quantity', {
      header: () => 'Quantity',
      cell: info => info.renderValue(),
    }),
  ],
  [],
)

方法2：显式兼容不同值类型 #

将数组类型标注为ColumnDef<Reservation, unknown>[]，利用第二个泛型参数接受任意列值类型：

const columns = useMemo<ColumnDef<Reservation, unknown>[]>(
  () => [
    columnHelper.accessor('id', {
      header: () => 'S/N',
      cell: info => info.getValue(),
    }),
    columnHelper.accessor('shift', {
      header: 'Shift',
    }),
    columnHelper.accessor('quantity', {
      header: () => 'Quantity',
      cell: info => info.renderValue(),
    }),
  ],
  [],
)

方法3：类型断言（兜底方案） #

若前两种方法无效，可使用类型断言强制转换（不推荐，可能隐藏真实类型问题）：

const columns = useMemo(
  () => [
    columnHelper.accessor('id', {
      header: () => 'S/N',
      cell: info => info.getValue(),
    }) as ColumnDef<Reservation>,
    columnHelper.accessor('shift', {
      header: 'Shift',
    }) as ColumnDef<Reservation>,
    columnHelper.accessor('quantity', {
      header: () => 'Quantity',
      cell: info => info.renderValue(),
    }) as ColumnDef<Reservation>,
  ],
  [],
)

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