如何将Firebase数据解析并渲染到MUI DataGrid组件中

我正在学习如何将Firebase中的数据解析到MaterialTable中，因为这种方式比手动通过map搭配<th>、<tr>实现的表格更简洁，但我还没有找到任何将MaterialTable和Firebase结合的教程。目前所有教程都仅展示如何解析手动构造的数据，没有涉及Firebase对接的内容，欢迎大家提供相关文档、技巧或帮助。

现有可正常运行的代码 #

1. Firebase数据获取逻辑 #

const [estudiantes, setEstudiantes] = useState([]);
const estudiantesRef = db.collection("usuarios").doc(user.uid).collection("estudiantes")

useEffect(() => {
  estudiantesRef
  .orderBy('name')
   .onSnapshot(snapshot => {
     
      const tempData = [];
      snapshot.forEach((doc) => {
        const data = doc.data();
        tempData.push(data);
      });
      setEstudiantes(tempData);
    })
}, []);

2. 表格列配置 #

const columns = [
  { field: 'id', headerName: 'ID', width: 100 },
  {field: 'nombre', headerName: 'Nombre', width: 200},
  {field: 'colegio', headerName: 'Colegio', width: 250},
  {field: 'grado', headerName: 'Grado', width: 150}
]

3. 表格渲染逻辑 #

return (
      <div className = "table_container" >
    <DataGrid
      rows={tempData}
      columns={columns}
      pageSize={5}
      rowsPerPageOptions={[5]}
      checkboxSelection
    />
  </div>
  )
}

export default ListadoEstudiantes

调试中问题代码 #

以下是我尚未完成的数据处理尝试，一直在调试不同方案：

const [data, setData] = useState();

useEffect(() => {
  estudiantes.map((estudiantes, index) => ({
    setData(estudiantes[index])
  }))
}, [estudiantes])

目前这段代码一直报错，但我会持续调试直到成功。

预期实现效果 #

欢迎大家提供任何技巧、文档或相关帮助。

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