React结合Ant Design Table定义onChange sorter的TypeScript类型时报错

报错根因 #

• SorterResult<T> | SorterResult<T>[] 是联合类型，在未做类型收窄的情况下，TypeScript 无法确认当前值是单个对象还是数组，直接访问数组不存在的 order、field 属性就会触发报错。
• 之前使用的 RecordType 是 Ant Design 类型定义里的占位泛型，不是实际可用的类型，需要替换为表格行数据的实际业务类型。

正确配置步骤 #

1. 定义表格行数据类型（解决泛型入参问题） #

SorterResult 的泛型参数，就是表格 dataSource 中每一条数据的 TypeScript 类型，直接定义即可：

// 替换为你的业务实际数据结构
interface TableRecord {
  id: number;
  name: string;
  // ... 其他业务字段
}

2. 子组件 CustomTable 类型适配 #

为 Table 组件指定泛型为上述行类型，同时同步 props 中的回调类型：

// 定义CustomTable的props类型
interface CustomTableProps {
  onChange?: (
    pagination: TablePaginationConfig,
    filters: Record<string, FilterValue | null>,
    // 泛型替换为你定义的 TableRecord
    sorter: SorterResult<TableRecord> | SorterResult<TableRecord>[],
    extra: TableCurrentDataSource<TableRecord>
  ) => void;
}

const CustomTable = ({ onChange }: CustomTableProps) => {
  // Table组件必须显式传入泛型<TableRecord>，保证类型统一
  return <Table<TableRecord> columns={columns} dataSource={data} onChange={onChange} />
}

3. 父组件回调做类型收窄（解决属性访问报错） #

在父组件的 onChange 实现里，先判断 sorter 是单个对象还是数组，再访问对应属性：

const Test = () => {
  // 同步state的类型，避免隐式any
  const [state, setState] = useState<
    [SorterResult<TableRecord>['order'], SorterResult<TableRecord>['field'] | undefined]
  >([]);

  function onChange(
    pagination: TablePaginationConfig,
    filters: Record<string, FilterValue | null>,
    sorter: SorterResult<TableRecord> | SorterResult<TableRecord>[],
    extra: TableCurrentDataSource<TableRecord>
  ) {
    // 类型收窄：判断sorter是否为数组
    if (!Array.isArray(sorter)) {
      // 此处TS已识别为单个SorterResult，可正常访问order、field
      setState([sorter.order, sorter.field]);
      return;
    }
    // 多排序场景：如果是数组，可根据业务逻辑处理（比如取第一个排序项）
    const firstSorter = sorter[0];
    setState([firstSorter?.order, firstSorter?.field]);
  }

  return <CustomTable onChange={onChange} />;
};

额外注意点 #

• 如果表格默认开启了多排序模式，sorter 返回值一定是数组，可直接按数组逻辑处理。
• 如果未开启多排序，sorter 返回值固定为单个对象，类型收窄后即可正常访问属性。

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