TypeScript报错：dataIndex无法分配给ColumnProps<Company>类型

核心问题分析 #

报错本质是你传入的列配置对象和组件期望的ColumnProps<Company>类型不匹配——大概率是你误用了第三方UI库（比如Ant Design）自带的ColumnProps，而非自己在interface.tsx中定义的带dataIndex的ColumnType；或者自定义类型没有正确继承组件的基础属性。

具体修复步骤 #

1. 修正类型导入路径 #

检查list.tsx中导入的列类型，确保是你自定义的ColumnType，而非第三方库的默认类型：

// 错误：误用AntD默认ColumnProps
import { ColumnProps } from 'antd/es/table';

// 正确：导入自定义的ColumnType
import { ColumnType } from './interface';

2. 确保自定义类型正确继承基础属性 #

在interface.tsx中，让ColumnType继承第三方库的基础列属性，同时明确声明dataIndex：

// interface.tsx
import { ColumnProps } from 'antd/es/table'; // 替换为你使用的UI库基础列类型

// 继承基础属性，再添加自定义的dataIndex字段
export interface ColumnType<T = unknown> extends ColumnProps<T> {
  dataIndex: string;
  // 其他自定义属性...
}

3. 组件中使用正确的类型约束 #

在list.tsx的列配置数组中，明确指定类型为你的ColumnType<Company>：

// list.tsx
import { ColumnType, Company } from './interface';

const columns: ColumnType<Company>[] = [
  {
    dataIndex: 'companyName', // 此时TypeScript会正确识别该属性
    title: '公司名称',
    // 其他列配置...
  }
];

// 渲染表格时传入columns
<Table columns={columns} dataSource={yourDataSource} />

4. 排查命名冲突 #

如果同时导入了第三方库的ColumnProps和自定义类型，容易出现命名冲突，建议重命名自定义类型：

// interface.tsx
import { ColumnProps } from 'antd/es/table';

export interface CustomColumnProps<T = unknown> extends ColumnProps<T> {
  dataIndex: string;
}

额外检查项 #

• 确认Company接口中存在与dataIndex值对应的字段（比如dataIndex: 'companyName'对应Company里的companyName属性）。
• 如果使用的不是Ant Design表格，替换为对应UI库的基础列类型即可，核心逻辑是自定义类型必须继承组件要求的基础类型，同时明确包含你需要的属性。

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