无法从react-table的useTable与usePagination获取page属性的问题排查

问题核心 #

react-table默认的TableInstance类型不包含usePagination钩子注入的分页相关属性，TypeScript无法自动识别钩子扩展的类型，因此抛出属性不存在的错误。

可行解决方案 #

1. 手动合并分页类型扩展 #

从react-table导入分页相关类型，合并到表实例类型中，明确告知TypeScript当前实例包含分页属性：

import { useTable, usePagination, TableInstance, UsePaginationInstanceProps } from 'react-table';

// 定义你的数据结构类型
interface PipelinesData {
  // 替换为实际数据字段
  id: string;
  name: string;
}

// 合并基础表实例类型与分页扩展类型
type TableWithPagination = TableInstance<PipelinesData> & UsePaginationInstanceProps<PipelinesData>;

const tableData = useMemo(() => data, [data]);
const tableColumns = useMemo(() => columns, [columns]);

// 初始化表实例并断言类型
const tableInstance = useTable(
  {
    columns: tableColumns,
    data: tableData,
  },
  usePagination,
) as TableWithPagination;

const {
  getTableProps,
  getTableBodyProps,
  headerGroups,
  page, // 类型错误消失
  rows,
  prepareRow,
} = tableInstance;

2. 移除不必要的any断言 #

你之前给columns加了as any，这会丢失列的类型信息，导致TypeScript无法正确推断表的完整类型。给columns定义正确的类型替代any：

import { Column } from 'react-table';

// 给列数组指定正确类型
const columns: Column<PipelinesData>[] = [
  {
    Header: 'ID',
    accessor: 'id',
  },
  {
    Header: '名称',
    accessor: 'name',
  },
  // 其他列配置
];

3. 依赖TypeScript自动推断（简化方案） #

如果使用的是react-table v7+的新版本，移除多余的类型约束，让TypeScript根据钩子组合自动推断实例类型：

const tableInstance = useTable(
  {
    columns: tableColumns,
    data: tableData,
  },
  usePagination,
);

// 直接解构，TypeScript会自动识别page属性
const {
  getTableProps,
  getTableBodyProps,
  headerGroups,
  page,
  rows,
  prepareRow,
} = tableInstance;

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