如何在ReactJS项目中获取Firebase Realtime Database嵌套子节点的值

前置校验 #

• 确认数据库节点名称拼写和代码完全一致，代码中写的Profil需和你数据库里的节点大小写、拼写完全匹配，若数据库节点为profile需同步修改代码中的路径
• 确认Realtime Database权限规则允许读取，测试阶段可临时使用如下规则验证：

{
  "rules": {
    ".read": true,
    ".write": true
  }
}

• 确认你导入的fire实例是已经完成初始化的Firebase Database根引用

修正后的完整组件代码 #

你原有代码缺少错误处理、加载状态、监听卸载逻辑，且return结构缺闭合标识，修正后可直接使用：

import { useState, useEffect } from 'react';
// 替换为你自己的Firebase配置文件路径
import { fire } from './firebase/config';

const Database = () => {
  const [data, setData] = useState({});
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const profilRef = fire.child("Profil");
    // 绑定值变化监听
    const onValueChange = profilRef.on(
      "value",
      (snapshot) => {
        setLoading(false);
        setData(snapshot.exists() ? snapshot.val() : {});
      },
      (err) => {
        setLoading(false);
        setError(err.message);
      }
    );

    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      profilRef.off("value", onValueChange);
      setData({});
    };
  }, []);

  // 加载状态展示
  if (loading) return <tbody><tr><td colSpan="2">数据加载中</td></tr></tbody>;
  // 错误状态展示
  if (error) return <tbody><tr><td colSpan="2">加载失败：{error}</td></tr></tbody>;
  // 空数据状态展示
  if (Object.keys(data).length === 0) return <tbody><tr><td colSpan="2">暂无用户数据</td></tr></tbody>;

  return (
    <tbody>
      {Object.keys(data).map((userId, index) => (
        <tr key={userId}>
          <th scope="row">{index + 1}</th>
          <td>{data[userId]?.email || '未填写邮箱'}</td>
          {/* 如需获取其他子节点字段，直接新增td即可，例：<td>{data[userId]?.name}</td> */}
        </tr>
      ))}
    </tbody>
  );
};

export default Database;

取值逻辑说明 #

Profil节点下的所有子节点会以对象形式存在data变量中，对象的key是每个子节点的id，value是对应子节点的所有字段值，你要取任意字段直接通过data[子节点id].字段名的格式调用即可，加?.可选链操作符可以避免字段不存在时抛出运行时错误。

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