Material UI DataGrid默认过滤报错：columnField不存在于GridFilterItem类型

出现这个错误是因为你使用的DataGrid版本和参照的示例版本不匹配：

• 若使用Material UI DataGrid v5：GridFilterItem类型对应的字段名是field，而非columnField
• 若使用v6版本：才会采用columnField作为字段名

对应修复方案： #

情况1：使用v5版本 #

将columnField替换为field即可：

<DataGrid
  rows={rows}
  getRowId={(row) => row.txnId}
  columns={columns}
  filterModel={{
    items: [
      {
        field: 'vendorName', // 替换columnField为field
        operatorValue: 'contains',
        value: "dd"
      }
    ]
  }}
/>

情况2：使用v6版本 #

如果确认使用的是v6，先检查@mui/x-data-grid包的版本是否正确；若版本无误，可能是类型导入问题，确保导入v6对应的类型：

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

另外，需确认你的columns配置中存在vendorName字段的定义，避免因字段不存在引发额外问题。

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