React中Firebase数据库查询返回null，如何正确获取works数据？

看起来你的查询遇到了两个核心问题：数据库权限限制，以及没有匹配你的嵌套数据结构进行遍历，我们一步步来解决：

1. 先排查数据库权限问题 #

控制台返回val null最常见的原因是Firebase数据库的安全规则阻止了读取操作。Firebase默认的规则要求用户必须认证才能读写数据，如果你的应用还没实现用户登录，或者当前没有登录状态，就会读取失败返回null。

临时调试规则（开发阶段） #

你可以先在Firebase控制台的「数据库」→「规则」里临时设置开放权限（上线前一定要改回严格规则！）：

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

修改后点击「发布」，再刷新你的应用，看看是否能读取到数据。

2. 匹配嵌套数据结构修改遍历逻辑 #

从你的数据库结构来看，works节点下并不是直接存储作品，而是先按用户ID分组，每个用户ID下才是该用户的作品集合。你之前的代码只做了一层遍历，无法正确解析这种嵌套结构。

修正后的查询代码 #

componentDidMount() { 
  const itemsRef = firebase.database().ref('works'); 
  itemsRef.on('value', (snapshot) => { 
    console.log('snap', snapshot); 

    // 先判断是否有数据，避免null报错
    if (!snapshot.exists()) {
      console.log('没有可读取的works数据');
      this.setState({ items: [] });
      return;
    }

    const usersWorks = snapshot.val();
    console.log('各用户的作品集合', usersWorks);
    
    let newState = []; 
    // 第一层遍历：遍历每个用户ID
    for (let userId in usersWorks) {
      // 第二层遍历：遍历当前用户下的所有作品
      const userWorks = usersWorks[userId];
      for (let workId in userWorks) {
        newState.push({ 
          id: workId, 
          title: userWorks[workId].title, 
          user: userId // 或者如果作品里自带user字段，也可以用userWorks[workId].user
        }); 
      }
    }
    this.setState({ items: newState }); 
  }); 
}

额外优化建议 #

• 上线前一定要把数据库规则改回安全模式，比如只允许认证用户读写，或者针对works节点设置更精细的权限，避免数据泄露。
• 可以使用Firebase快照自带的forEach方法替代for...in，更符合Firebase的遍历习惯：

  itemsRef.on('value', (snapshot) => {
    let newState = [];
    snapshot.forEach(userSnapshot => {
      const userId = userSnapshot.key;
      userSnapshot.forEach(workSnapshot => {
        const workData = workSnapshot.val();
        newState.push({
          id: workSnapshot.key,
          title: workData.title,
          user: userId
        });
      });
    });
    this.setState({ items: newState });
  });
  

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