如何基于MUI DataGrid的ID删除Firebase实时数据库指定数据

问题核心是你用自定义递增ID替换了Firebase自动生成的节点ID，导致删除时找不到对应数据库路径，同时前端过滤逻辑也失效。按以下步骤修复：

1. 保留Firebase原始节点ID到数据中 #

从Firebase拉取用户数据时，必须把每个用户的Firebase自动生成节点ID（即数据节点的key）作为数据对象的id字段，而非用index生成。示例代码：

// 假设你是这样从Firebase获取数据的，修改成如下逻辑
const fetchUsers = async () => {
  const usersRef = ref(db, 'users');
  const snapshot = await get(usersRef);
  if (snapshot.exists()) {
    const usersList = [];
    snapshot.forEach(childSnap => {
      // 将Firebase节点ID存入user对象的id字段
      usersList.push({
        ...childSnap.val(),
        id: childSnap.key 
      });
    });
    setUserData(usersList);
  }
};

2. 修改DataGrid的rows配置 #

不需要再手动添加递增ID，直接使用包含原始Firebase ID的userData：

<DataGrid
  rows={userData} // 直接用原始数据，无需map添加id
  columns={userColumns.concat(actionColumn)}
  pageSize={5}
  rowsPerPageOptions={[5]}
  components={{ Toolbar: GridToolbar }}
/>

3. 修正handleDelete函数 #

现在传入的id就是Firebase的节点ID，能正确匹配数据库路径，同时前端过滤逻辑也能正确移除对应数据：

const handleDelete = (id) => {
  if (window.confirm("Are you sure you want to delete this user?")) {
    const userRef = ref(db, `/users/${id}`);
    remove(userRef)
      .then(() => {
        // 用Firebase原始ID过滤数据
        setUserData(prevData => prevData.filter(user => user.id !== id));
        toast.success("User deleted successfully");
      })
      .catch((error) => {
        toast.error(error.message);
      });
  }
};

额外说明 #

• 之前用HTML表格没问题，大概率是因为当时直接使用了Firebase的原始ID，换成DataGrid后误用了index生成的临时ID才出问题。
• 绝对不要用数组index作为DataGrid的row id：当数据排序、分页或增删后，index会变化，导致ID混乱，引发各种逻辑错误。必须用稳定的唯一标识（比如Firebase节点ID、数据库自增ID等）。

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