使用useEffect从Firebase加载数据后无法显示，报未定义属性错误

核心问题 #

报错Cannot read properties of undefined (reading 'first_name')源于三个关键问题：

1. 组件初始渲染时user状态为undefined，直接访问user.first_name触发错误
2. 更新状态时错误地将用户数据嵌套为{ user: 实际用户对象 }的结构
3. Firebase返回的users大概率是键值对对象而非数组，无法直接使用filter方法筛选

分步修复 #

1. 初始化状态并添加渲染安全判断 #

给useState设置初始空对象，同时在渲染时通过可选链或默认值避免未定义报错：

// 初始化状态
const [user, setUser] = useState({});

// 渲染部分优化
return (
  <>
    <p>Hello {user?.first_name || 'Guest'}</p>
  </>
)

2. 修正状态更新的结构 #

不要嵌套对象，直接传入获取到的用户数据：

// 原错误写法
setUser({ user });
// 改为直接赋值
setUser(user);

3. 处理Firebase的对象型数据 #

如果Firebase的/users节点是键值对结构（如{ "user_123": {id: "user_123", first_name: "张三"}, ... }），需先转为数组再筛选：

onValue(usersRef, (snapshot) => {
  const users = snapshot.val();
  if (users !== null) {
    // 将对象转为数组
    const usersArray = Object.values(users);
    // 查找目标用户，找不到则设为空对象
    const targetUser = usersArray.find(u => u.id === userId) || {};
    setUser(targetUser);
  } else {
    setUser({});
  }
});

完整修复后的代码 #

import React, { useEffect, useState } from 'react'
import { useParams } from "react-router-dom";
import base from '../base';
import { ref, onValue } from "firebase/database";

const UserDetails = () => {
  const { userId } = useParams();
  const [user, setUser] = useState({});

  useEffect(() => {
    const usersRef = ref(base, '/users');

    onValue(usersRef, (snapshot) => {
      const users = snapshot.val();
      if (users !== null) {
        const usersArray = Object.values(users);
        const targetUser = usersArray.find(u => u.id === userId) || {};
        setUser(targetUser);
      } else {
        setUser({});
      }
    });
  }, [userId]);

  return (
    <>
      <p>Hello {user?.first_name || 'Guest'}</p>
    </>
  )
}

export default UserDetails

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