NextJS+React环境下MUI DataGrid行预选中的类型错误问题及替代方案咨询

看起来你在MUI DataGrid的行预选中遇到了版本带来的类型不匹配问题，我来帮你拆解一下这个问题的原因和解决方法，同时也给你推荐几个靠谱的替代组件。

一、类型错误的原因及解决方法 #

你遇到的Type 'number[]' is missing the following properties from type 'GridRowSelectionModel': type, id错误，本质是MUI X DataGrid在v7及以上版本中对rowSelectionModel的类型定义做了重大调整：

• 旧版本（v6及以下）中，多行选择的rowSelectionModel可以直接传number[]类型的ID数组；
• 而v7+版本中，GridRowSelectionModel变成了一个结构化的对象，用于区分不同的选择类型（比如行选择、列选择等），对于行选择，正确的格式是{ type: 'rows', ids: number[] }。

具体修正步骤 #

如果只是需要初始预选中，你可以直接传递结构化对象给rowSelectionModel；如果需要支持用户修改选中状态，建议用受控状态管理，示例代码如下：

'use client';
import { Container, Typography } from '@mui/material';
import { DataGrid, GridRowSelectionModel } from '@mui/x-data-grid';
import React from 'react';

const employees = [
  { id: 1, firstName: 'John', lastName: 'Doe', email: 'john.doe@example.com', mobilePhone: '123-456-7890' },
  { id: 2, firstName: 'Jane', lastName: 'Smith', email: 'jane.smith@example.com', mobilePhone: '234-567-8901' },
  { id: 3, firstName: 'Alice', lastName: 'Johnson', email: 'alice.johnson@example.com', mobilePhone: '345-678-9012' },
  { id: 4, firstName: 'Bob', lastName: 'Brown', email: 'bob.brown@example.com', mobilePhone: '456-789-0123' },
  { id: 5, firstName: 'Charlie', lastName: 'Davis', email: 'charlie.davis@example.com', mobilePhone: '567-890-1234' },
];

const EmployeePage: React.FC = () => {
  const preselectedIds = [2, 4];
  // 初始化符合GridRowSelectionModel类型的状态
  const [selectionModel, setSelectionModel] = React.useState<GridRowSelectionModel>({
    type: 'rows',
    ids: preselectedIds,
  });

  if (!employees || employees.length === 0) {
    return (
      <Container>
        <Typography variant="h4" gutterBottom>
          No Employees Available
        </Typography>
      </Container>
    );
  }

  return (
    <Container>
      <Typography variant="h4" gutterBottom>
        Employee List
      </Typography>
      <DataGrid
        rows={employees}
        columns={[
          { field: 'id', headerName: 'ID', width: 90 },
          { field: 'firstName', headerName: 'First Name', width: 150 },
          { field: 'lastName', headerName: 'Last Name', width: 150 },
          { field: 'email', headerName: 'Email', width: 200 },
          { field: 'mobilePhone', headerName: 'Mobile Phone', width: 150 },
        ]}
        checkboxSelection
        disableRowSelectionOnClick
        // 传递符合类型要求的选择模型
        rowSelectionModel={selectionModel}
        // 绑定选择变化的回调（支持用户修改选中状态）
        onRowSelectionModelChange={setSelectionModel}
        pageSizeOptions={[5]}
      />
    </Container>
  );
};

export default EmployeePage;

如果你暂时不想适配新版本的类型，也可以降级@mui/x-data-grid到v6版本，这样原来的number[]写法就能正常工作，但不推荐长期这么做，毕竟新版本会有更多功能和Bug修复。

二、MUI DataGrid的替代方案推荐 #

如果MUI DataGrid的类型变化让你觉得麻烦，或者你需要更适合自己场景的表格组件，这里有几个成熟的替代选项：

• AG Grid：功能覆盖最全面的表格组件之一，支持预选中、分组、过滤、导出等几乎所有你能想到的表格功能，文档非常详细，社区活跃，适合复杂的企业级场景。唯一的小缺点是体积略大，但性能优化做得很好。
• TanStack Table（原React Table）：完全Headless的表格库，只提供核心逻辑，UI部分需要你自己实现（可以搭配MUI的基础组件）。它的灵活性极高，体积小巧，适合需要高度定制表格UI的场景，学习曲线略陡，但一旦上手会非常顺手。
• Blueprint Table：Palantir开源的企业级UI组件库中的表格组件，UI设计简洁专业，支持多选、排序、冻结列等常用功能，和MUI的风格也比较搭，集成成本低。
• React Data Grid：另一个开源的功能型表格组件，支持预选中、编辑、分页等功能，API设计直观，文档清晰，适合中小型项目。

补充说明 #

如果你在调整后还是遇到问题，可以检查你的@mui/x-data-grid版本，确认是否是v7+，或者查看项目中是否有自定义的类型覆盖导致冲突。另外，你可以在本地的类型定义文件中查看GridRowSelectionModel的具体结构，帮助你更好地理解类型要求。

内容来源于stack exchange