MUI X Data Grid Pro报"t" is read-only错误如何修复

• 列配置与行数据的字段名大小写不匹配：columns中患者ID列的field配置为patientId（驼峰写法，字母d小写），但所有rows行数据中对应键名为patientID（ID两个字母全大写）。MUI X Data Grid对字段名是严格大小写敏感匹配的，渲染列时找不到对应数据就会触发内部运行错误，页面显示通用的“An error occurred”提示。控制台报错中提到的压缩变量t是组件生产构建压缩后的字段访问逻辑，因为源码被压缩所以无法直接定位到具体字段。
• 存在MUI大版本混用问题：代码中同时引入了@mui/material（MUI v5+ 新命名空间）和@material-ui/core（MUI v4 旧命名空间）的依赖，两套版本的上下文、样式注入逻辑不兼容，也可能触发组件内部异常。

1. 统一字段名大小写，二选一即可：
   • 方案1：修改列配置，将patientId字段改为和行数据一致的patientID，示例代码：

   const columns: GridColumns = [
       { field: 'voicemail', headerName: 'VOICEMAIL' },
       { field: 'patientName', headerName: 'PATIENT NAME' },
       { field: 'patientID', headerName: 'PATIENT ID' }, // 修正field值
       { field: 'phoneNumber', headerName: 'PHONE NUMBER' },
       { field: 'callTime', headerName: 'TIME OF CALL' },
       { field: 'department', headerName: 'DEPARTMENT' },
       { field: 'status', headerName: 'STATUS' },
       { field: 'assignee', headerName: 'ASSIGNEE' },
   ];
   

   • 方案2：修改所有行数据的键名，将patientID改为patientId，和列配置保持一致。
2. 统一MUI依赖版本，禁止跨大版本混用：
   • 若使用MUI v5，将index.tsx中所有从@material-ui/core导入的模块替换为@mui/material的对应导出，makeStyles从@mui/styles导入，卸载旧版@material-ui/*相关依赖。
   • 若使用MUI v4，需安装和核心库版本匹配的v4版@mui/x-data-grid-pro，不要使用v5及以上版本的Data Grid Pro组件。
3. 清理无用导入：当前代码中导入的GridToolbar、LicenseInfo、useDemoData、KeyboardArrowRightIcon、styled、FormControl等模块未被使用，虽然不会直接触发报错，但会增加打包体积，建议移除。

注：MUI X Data Grid Pro未配置商业许可密钥只会在控制台抛出警告，不会阻断组件渲染，不是本次报错的诱因。

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