如何将MUI DataGrid中编辑的editRows数据更新至Firebase？

问题根因 #

你取不到model内字段的核心原因是MUI X DataGrid的editRowsModel采用嵌套结构，格式为：
{ [行唯一ID]: { [字段名]: { value: 编辑后的值, ...其他编辑元信息 } } }
并不是直接存储字段键值对，所以直接访问model.nombre、model[0].name都会返回undefined。

最优解决方案：用行编辑提交事件更新Firebase #

不推荐在onEditRowsModelChange中处理Firebase更新，该事件会在你每次编辑单元格时触发，会产生大量无用请求。更推荐使用DataGrid的onProcessRowUpdate事件，它只会在用户提交整行编辑时触发一次，逻辑更合理。

1. 调整DataGrid配置

<DataGrid
  editMode="row"
  editRowsModel={editRowsModel}
  onEditRowsModelChange={handleEditRowsModelChange}
  // 新增：行唯一标识配置，如果你的行ID字段是uid而非默认的id需要加这个
  getRowId={(row) => row.uid}
  // 新增：行编辑提交处理
  onProcessRowUpdate={async (newRow) => {
    try {
      // newRow是编辑完成后的整行完整数据，直接取对应字段即可
      await db.collection("usuarios")
        .doc(user.uid)
        .collection("estudiantes")
        .doc(newRow.uid)
        .update({
          nombre: newRow.nombre,
          colegio: newRow.colegio,
          grado: newRow.grado
        })
      // 返回更新后的行给DataGrid刷新视图
      return newRow
    } catch (err) {
      console.error("更新Firebase失败：", err)
      // 出错时返回原行撤销编辑
      return newRow
    }
  }}
  // 原有组合键触发编辑逻辑保留
  onCellDoubleClick={(params, event) => {
    if (!event.ctrlKey) {
      event.defaultMuiPrevented = true;
    }
  }}
  // 其他原有配置...
/>

2. 原有状态和处理函数保留即可

//存储编辑行数据的状态变量
const [editRowsModel, setEditRowsModel] = React.useState({});

//编辑变更处理函数
const handleEditRowsModelChange = React.useCallback((model) => {
  setEditRowsModel(model);
}, []);

适配原有写法的临时方案 #

如果你坚持要在onEditRowsModelChange中处理，可以按如下结构解析字段值：

const handleEditRowsModelChange = React.useCallback((model) => {
  setEditRowsModel(model);
  // 解析editRowsModel
  const editRowIds = Object.keys(model)
  if (editRowIds.length === 0) return
  const currentEditRowId = editRowIds[0]
  const editFields = model[currentEditRowId]
  // 提取字段值
  const updatedFields = {
    nombre: editFields.nombre?.value,
    colegio: editFields.colegio?.value,
    grado: editFields.grado?.value
  }
  // 执行Firebase更新
  db.collection("usuarios")
    .doc(user.uid)
    .collection("estudiantes")
    .doc(currentEditRowId)
    .update(updatedFields)
}, []);

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