MUI X Data Grid自定义分页onChange类型不匹配问题修复

错误原因 #

MUI X Data Grid默认将slotProps.pagination.onChange的类型推断为FormEventHandler，但自定义分页组件依赖的是MUI原生Pagination组件的onChange签名（(event: React.ChangeEvent<unknown>, page: number) => void），两者类型不匹配，触发TS2322类型错误。

修复方案 #

显式指定slotProps.pagination的类型，让TypeScript匹配自定义分页组件的props类型，具体有两种实现方式：

方式一：直接为slotProps指定类型 #

定义slotProps时明确其类型为包含自定义PaginationProps的对象：

import { GridPaginationSlotProps } from '@mui/x-data-grid';

// 自定义分页组件的props类型（已存在）
interface PaginationProps {
  page: number;
  count: number;
  onChange: (event: React.ChangeEvent<unknown>, page: number) => void;
}

// 定义slotProps并指定类型
const slotProps: { pagination: PaginationProps } = {
  pagination: {
    page: paginationModel.page,
    count: Math.round(rows.length / paginationModel.pageSize),
    onChange: handleChangePagination,
  },
};

// 在DataGrid中使用
<DataGrid
  rows={rows}
  columns={columns}
  checkboxSelection
  autoHeight
  disableColumnMenu
  paginationModel={paginationModel}
  slots={{
    pagination: Pagination,
    toolbar: DataGridTitle,
  }}
  slotProps={slotProps}
  onPaginationModelChange={setPaginationModel}
  disableRowSelectionOnClick
  rowSelection
  hideFooterSelectedRowCount
/>

方式二：使用类型断言 #

如果不想单独定义slotProps变量，可直接在slotProps.pagination上添加类型断言：

slotProps={{
  pagination: {
    page: paginationModel.page,
    count: Math.round(rows.length / paginationModel.pageSize),
    onChange: handleChangePagination,
  } as GridPaginationSlotProps & PaginationProps,
}}

说明 #

两种方式都能解决类型不兼容问题，推荐方式一，因为它的类型声明更清晰，维护性更强。自定义分页组件的代码无需修改，保持原有逻辑即可。

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