如何在React.js中展示Firebase实时数据库中的数据

你的代码存在的几个问题： #

• 组件定义缺少大括号，export default function User() 后未用 {} 包裹代码逻辑
• 异步获取数据的逻辑未放在 useEffect 中，会导致组件每次渲染都重复发起请求
• setUser(...snapshot.val()) 用法错误，snapshot.val() 返回的是用户对象，直接赋值即可，无需展开运算符
• 组件的JSX结构不完整，缺少外层容器，也未处理数据加载中的状态
• 重复初始化数据库实例，已从Config导入db，无需再调用getDatabase()

修正后的完整代码 #

import React, { useState, useEffect } from 'react';
import { Link, useParams } from 'react-router-dom';
import { ref, child, get } from 'firebase/database';
import { db } from './Config/Config';

export default function User() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const { id } = useParams();

  useEffect(() => {
    const fetchUser = async () => {
      try {
        const dbRef = ref(db);
        const snapshot = await get(child(dbRef, `AllUsers/${id}`));
        
        if (snapshot.exists()) {
          setUser(snapshot.val());
        } else {
          setError('未找到该用户数据');
        }
      } catch (err) {
        setError('数据获取失败：' + err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchUser();
  }, [id]);

  if (loading) {
    return <div>加载中...</div>;
  }

  if (error) {
    return <div>{error}</div>;
  }

  return (
    <div className="user-container">
      <h2>用户详情</h2>
      <p>用户ID：{id}</p>
      {user && (
        <div className="user-info">
          <p>用户名：{user.username}</p>
          <p>邮箱：{user.email}</p>
          {/* 根据你的数据库结构展示其他字段 */}
        </div>
      )}
      <Link to="/">返回首页</Link>
    </div>
  );
}

关键说明： #

1. useEffect包裹请求：将数据获取逻辑放在useEffect中，依赖项设置为id，确保只有当id变化时才重新请求数据，避免重复调用。
2. 状态管理：新增loading和error状态，分别处理数据加载中、加载失败的场景，提升用户体验。
3. 正确更新State：直接将snapshot.val()返回的用户对象赋值给user，不需要展开运算符（除非你的数据结构是数组，但从路径AllUsers/${id}来看是单个用户对象）。
4. 安全的JSX渲染：通过{user && (...)}确保只有当user存在时才渲染用户信息，避免空值报错。
5. 使用已导入的db实例：直接使用Config中导出的db，无需重复初始化数据库连接。

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