MUI X Data Grid配置columns触发TypeScript类型报错如何解决

核心问题出在类型定义没有做泛型透传，MUI DataGrid的类型系统要求列配置和行数据类型绑定，同时回调属性要对齐组件内置的类型签名，按以下步骤修改即可：

1. 修正自定义DataTable的类型定义 #

不要硬编码列、选择模型、回调的类型，通过泛型透传MUI内置的合法类型，替换原有DataTableProps定义：

import type {
  GridColDef,
  GridRowSelectionModel,
  GridValidRowModel
} from '@mui/x-data-grid-pro';

type DataTableProps<R extends GridValidRowModel = GridValidRowModel> = {
  columns: GridColDef<R>[]; // 列类型绑定行泛型，保证renderCell等配置和行类型匹配
  rows: R[];
  loading: boolean;
  selectionModel: GridRowSelectionModel; // 对齐MUI内置选择模型，兼容string/number类型的行ID
  onRowSelect: (selection: GridRowSelectionModel) => unknown; // 回调参数为选中ID集合，而非行数组
}

注意你之前定义的onRowSelect: (row: R) => unknown是完全错误的，DataGrid的行选择回调默认返回选中的行ID数组，不是行对象。

2. 修正列配置的类型定义 #

不要直接标注GridColDef[]，需要传入你实际业务的行类型作为泛型参数，先定义业务行类型，再给列配置绑定：

// 定义业务侧实际的行数据结构
type BusinessRow = {
  id: string;
  name: string;
  x: string;
  y: string | null;
  // 其他业务字段
}

// 列配置绑定行泛型，renderCell参数会自动推断类型，不需要自定义RenderCellType标注
const columns: GridColDef<BusinessRow>[] = [
  {
    field: 'name',
    headerName: tableColumns.name,
    minWidth: 100,
    resizable: true,
    flex: 1,
  },
  {
    field: 'x',
    headerName: x,
    resizable: false,
    flex: 1,
  },
  {
    field: 'y',
    headerName: y,
    minWidth: 220,
    resizable: false,
    flex: 1,
    renderCell: ({ row }) => row?.y || 'N/A',
  },
  {
    field: 'z',
    headerName: z,
    minWidth: 75,
    resizable: false,
    flex: 1,
    renderCell: ({ row }) => <Z vehicle={row} />,
  },
]

你之前自定义的RenderCellType如果没有绑定泛型可以直接删掉，绑定泛型后TS会自动推导renderCell的所有参数类型，手动标注反而容易引发类型不匹配。

3. 对齐使用时的变量类型 #

确保传入的filteredRows类型为BusinessRow[]，filteredIds类型为GridRowSelectionModel即可正常使用：

<DataTable
  onRowSelect={(selectedIds) => someFunction(selectedIds)}
  selectionModel={filteredIds}
  columns={columns}
  loading={loading}
  rows={filteredRows}
/>

如果需要在选中回调里拿到完整的行对象，在someFunction里通过selectedIds从filteredRows里过滤即可，不要修改onRowSelect的参数类型，会和组件内部的类型签名冲突。

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