React Table Column为何无法正确识别函数类型的accessor？TypeScript迁移中的类型错误求助

嘿，我刚好碰到过类似的问题，咱们来一步步解决它～

问题原因分析 #

你看到的类型错误，本质是TypeScript的自动类型推断和react-table的Column类型不匹配导致的。当你没有明确给columnsPersons指定类型时，TS会根据你写的内容推断出一个自定义类型，而这个类型里的accessor被错误地和Column<Person>期望的“字段名字符串”类型做比较，所以才会抛出string不能赋值给"birth_date"的错误——其实react-table是支持函数类型的accessor的，只是推断出了问题。

解决方案 #

有两种常用的解决方式，你可以根据需求选择：

1. 给列数组明确指定Column<Person>[]类型

直接在useMemo上加上泛型参数，告诉TS这个数组就是react-table的Column<Person>类型数组，这样就不会出现推断错误了：

import { Column } from 'react-table';

const columnsPersons = useMemo<Column<Person>[]>(() => [
  { 
    Header: 'Birth date', 
    accessor: (row: Person) => formatDate(row.birth_date) 
  }
], []);

2. 推荐：用Cell属性做格式化，保留accessor为字段名

如果你的需求只是显示格式化后的日期，更推荐这种方式：把accessor设为原始字段名（方便react-table做排序、筛选等操作，毕竟YYYY-MM-DD格式的字符串本身是可排序的），然后用Cell属性来渲染格式化后的内容：

const columnsPersons = useMemo<Column<Person>[]>(() => [
  { 
    Header: 'Birth date', 
    accessor: 'birth_date', // 绑定原始字段，支持排序等原生功能
    Cell: ({ value }) => formatDate(value) // 在这里处理格式化显示
  }
], []);

这种方式不仅类型不会出问题，还能保留react-table的原生功能（比如排序时用原始的日期字符串，结果更准确）。

回答你的疑问 #

react-table的Column类型完全支持函数作为accessor，之所以看起来不接受，是因为你没有给列数组明确指定类型，导致TS自动推断的类型和Column<Person>不兼容。只要手动指定了Column<Person>[]类型，函数式accessor就能正常使用啦。

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