Firebase数据库查询仅显示最后一条数据，无法获取前两条数据求助

嘿，我看你遇到了Firebase数据查询的两个小坑，刚好之前也踩过，给你捋捋怎么解决：

问题1：查询返回的数据仅显示最后一条 #

这大概率是变量作用域搞的鬼！你代码里用了var来声明循环里的i和k，var的作用域是整个函数，不是循环块。等循环跑完，所有后续操作（比如DOM渲染）引用的都是同一个变量，而这个变量最后会停在循环的最后一个值上，所以自然只会显示最后一条数据。

问题2：console.log无法获取第一条和第二条数据 #

这个其实和第一个问题是同根同源的——var的变量提升和函数级作用域导致的。当你在循环里用console.log时，如果后续有异步操作（哪怕是DOM渲染这种微任务），变量已经被循环更新到最后一个值了，所以你看不到前几条的正确数据。

直接给你改好的代码，两种方案任选： #

方案1：用Firebase推荐的snapshot.forEach遍历（更稳妥）

var ref = firebase.database().ref("recommendations");
ref.on("value", function(snapshot) {
  // 先判断有没有数据，避免空指针
  if (!snapshot.exists()) {
    console.log("数据库里还没数据哦");
    return;
  }
  
  // 遍历每个子节点，按数据库顺序来
  snapshot.forEach(function(childSnapshot) {
    var childData = childSnapshot.val();
    // 提取字段
    var title = childData.title;
    var link = childData.link;
    var presenter = childData.presenter;
    
    // 现在console.log能正确打印每一条了
    console.log("第N条数据：", title, link, presenter);
    
    // 这里写你的DOM操作，比如把数据渲染到页面
    // 举个例子：
    // var item = document.createElement('div');
    // item.innerHTML = `<h3>${title}</h3><p>分享人：${presenter}</p>`;
    // document.getElementById('recommend-list').appendChild(item);
  });
});

方案2：保留Object.keys，但把var换成let

var ref = firebase.database().ref("recommendations");
ref.on("value", function(snapshot) {
  var recommendations = snapshot.val();
  if (!recommendations) return;
  
  var keys = Object.keys(recommendations);
  console.log("所有数据的key：", keys);
  
  // 关键！把循环里的var换成let，让每个迭代有独立的变量
  for (let i = 0; i < keys.length; i++) {
    let k = keys[i];
    let title = recommendations[k].title;
    let link = recommendations[k].link;
    let presenter = recommendations[k].presenter;
    
    console.log(`第${i+1}条数据：`, title, link, presenter);
  }
});

额外提醒： #

记得检查一下Firebase数据库里recommendations节点下的每条数据，确保都有title、link、presenter这些字段哦，要是某个字段缺失，也会导致console.log打印不出对应的值~

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