React JS如何获取Firebase Realtime Database数据并渲染前端表格

我正在尝试从Firebase（Realtime Database）中获取数据，参考了多个视频教程仍未找到合适的解决方案，不清楚自己哪里编写有误，现将我的代码与Firebase数据库截图附上。
目标是将Firebase中的数据以表格形式展示在前端页面上。

Firebase Realtime Database 结构截图 #

当前存在问题的代码 #

import React,{useEffect} from 'react'
function TableDataGet() {
 useEffect(() => {
    return () => {
//firebase get table datacode
}})
 return (
<div>
      <div>
        <table>
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>nameMarathi</th>
                    <th>srno</th>
                    <th>mobile</th>
                </tr>
            </thead>

            <tbody>
                {
                   DataUser.map((item,id)=>{
                       <div>
                           {item.name}
                       </div>
                   })
                }
            </tbody>
        </table>
        </div>
</div>


 )
}
export default TableDataGet

代码存在以下核心错误：

• 未引入Firebase Realtime Database相关SDK，也未完成数据库实例初始化
• 未定义存储数据的状态变量DataUser，直接调用map方法会触发未定义报错
• useEffect钩子中仅写了组件卸载时的清理函数占位，没有实际的数据拉取逻辑
• map循环的回调函数没有返回渲染的JSX内容，且表格tbody节点下应该渲染<tr>行标签，不能直接放<div>
• 未处理数据加载状态、空状态、请求异常的边界场景

首先安装Firebase依赖：
npm install firebase

完整可运行代码 #

import React, { useEffect, useState } from 'react'
import { initializeApp } from "firebase/app";
import { getDatabase, ref, onValue } from "firebase/database";

// 替换为你自己Firebase项目的配置参数，从Firebase控制台项目设置中获取
const firebaseConfig = {
  apiKey: "你的项目apiKey",
  authDomain: "你的项目authDomain",
  databaseURL: "你的Realtime Database访问地址",
  projectId: "你的项目ID",
  storageBucket: "你的存储桶地址",
  messagingSenderId: "你的消息发送ID",
  appId: "你的应用ID"
};

// 初始化Firebase服务
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);

function TableDataGet() {
  // 定义存储用户数据、加载状态的state
  const [DataUser, setDataUser] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 替换为你数据库中存储表格数据的实际节点路径
    const dataRef = ref(db, '你的数据存储节点路径');
    
    // 监听节点数据，实时拉取更新
    const unsubscribe = onValue(dataRef, (snapshot) => {
      const rawData = snapshot.val();
      const formatData = [];
      if (rawData) {
        // Firebase返回的是对象格式，转换为数组方便遍历渲染
        Object.keys(rawData).forEach(key => {
          formatData.push({
            id: key,
            ...rawData[key]
          })
        })
      }
      setDataUser(formatData);
      setLoading(false);
    }, (error) => {
      console.error("数据拉取失败：", error);
      setLoading(false);
    });

    // 组件卸载时取消数据监听，避免内存泄漏
    return () => unsubscribe();
  }, [])

  if (loading) return <div>数据加载中...</div>

  return (
    <div>
      <div>
        <table border="1" cellPadding="8">
          <thead>
            <tr>
              <th>id</th>
              <th>name</th>
              <th>nameMarathi</th>
              <th>srno</th>
              <th>mobile</th>
            </tr>
          </thead>
          <tbody>
            {
              DataUser.length === 0 ? (
                <tr>
                  <td colSpan={5}>暂无数据</td>
                </tr>
              ) : (
                DataUser.map((item) => (
                  <tr key={item.id}>
                    <td>{item.id}</td>
                    <td>{item.name}</td>
                    <td>{item.nameMarathi}</td>
                    <td>{item.srno}</td>
                    <td>{item.mobile}</td>
                  </tr>
                ))
              )
            }
          </tbody>
        </table>
      </div>
    </div>
  )
}
export default TableDataGet

• 必须将firebaseConfig中的占位参数替换为你自己项目的实际配置，否则无法连接数据库
• 数据节点路径要和Realtime Database中实际存储数据的层级完全一致，否则拉取不到内容
• 开发阶段可以临时将Firebase数据库规则的读权限设置为true调试，上线前必须配置安全规则，避免数据泄露
• 列表渲染时必须给每一行<tr>设置唯一的key属性，直接使用Firebase自动生成的节点key即可

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