如何在Firebase实时数据库的UsersList中获取用户名？

常见原因及排查步骤 #

• 数据库路径/引用错误
  确认你的数据库引用路径和实际存储结构完全匹配，Firebase路径区分大小写。比如UsersList是根节点子节点的话，引用要写成firebase.database().ref('UsersList')，不能写错大小写或层级。

• 权限规则限制
  检查Realtime Database的安全规则，确保当前用户有读取UsersList的权限。默认规则仅允许认证用户读写，如果未登录或规则设为拒绝，会导致读取失败却返回undefined。
  临时测试可将规则改为（测试后务必改回安全规则，禁止生产环境使用）：

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

• 异步读取未正确处理
  Firebase读取是异步操作，若直接同步访问返回值必然得到undefined，必须用回调、Promise或async/await处理异步逻辑。

正确实现代码示例（Header.tsx） #

假设你的UsersList数据结构如下：

UsersList
  - userId1
    - username: "张三"
  - userId2
    - username: "李四"

方法1：实时监听数据变化 #

import { useEffect, useState } from 'react';
import { database } from './firebaseConfig'; // 你的Firebase配置文件
import { ref, onValue } from 'firebase/database';

const Header = () => {
  const [usernames, setUsernames] = useState<string[]>([]);

  useEffect(() => {
    const usersRef = ref(database, 'UsersList');
    // 监听数据变化
    const unsubscribe = onValue(usersRef, (snapshot) => {
      const data = snapshot.val();
      if (data) {
        // 遍历提取所有用户名
        const usernameList = Object.values(data).map((user: any) => user.username);
        setUsernames(usernameList);
        console.log('获取到的用户名:', usernameList);
      } else {
        console.log('UsersList为空');
      }
    });

    // 组件卸载时取消监听
    return () => unsubscribe();
  }, []);

  return (
    <div className="header">
      <h2>用户列表</h2>
      <ul>
        {usernames.map((name, index) => (
          <li key={index}>{name}</li>
        ))}
      </ul>
    </div>
  );
};

export default Header;

方法2：一次性读取数据 #

import { useEffect, useState } from 'react';
import { database } from './firebaseConfig';
import { ref, get } from 'firebase/database';

const Header = () => {
  const [usernames, setUsernames] = useState<string[]>([]);

  useEffect(() => {
    const fetchUsernames = async () => {
      try {
        const usersRef = ref(database, 'UsersList');
        const snapshot = await get(usersRef);
        if (snapshot.exists()) {
          const data = snapshot.val();
          const usernameList = Object.values(data).map((user: any) => user.username);
          setUsernames(usernameList);
          console.log('获取到的用户名:', usernameList);
        } else {
          console.log('UsersList不存在或为空');
        }
      } catch (error) {
        console.error('读取数据失败:', error);
      }
    };

    fetchUsernames();
  }, []);

  return (
    <div className="header">
      <h2>用户列表</h2>
      <ul>
        {usernames.map((name, index) => (
          <li key={index}>{name}</li>
        ))}
      </ul>
    </div>
  );
};

export default Header;

额外排查点 #

• 确认Firebase初始化配置的databaseURL和项目Realtime Database的URL完全一致。
• 检查浏览器控制台是否有Firebase相关错误提示（比如权限被拒），这类提示能快速定位问题。
• 如果是获取单个用户的用户名，确保传入了正确的userId，比如ref(database, 'UsersList/' + userId)。

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