Cloud Firestore单文档获取问题：如何获取全部用户图片与名称文档？

我来帮你搞定这两个问题：

Q2：为何仅能获取单个文档？ #

这是因为你在循环中使用了 list_div.innerHTML = ... 这种赋值方式——每次循环都会把之前生成的内容完全覆盖掉，最终页面上只会保留最后一次循环创建的用户卡片。

Q1：如何获取所有包含用户图片与名称的文档？ #

只需要修改循环中的内容拼接逻辑，把覆盖赋值改成追加内容即可，同时建议先清空容器避免重复加载时内容叠加，具体修改方案如下：

修改后的JS代码 #

const list_div= document.querySelector('#list_div');
// 先清空容器，避免重复加载时内容叠加
list_div.innerHTML = '';
db.collection('student entry').get().then(function(querySnapshot){
  querySnapshot.forEach(function(doc){
    // 用 += 追加内容，而不是 = 覆盖
    list_div.innerHTML += "<div class='col-sm-4 mt-2 mb-1'>"+ 
    "<div class='card'>"+ 
    "<img src='"+doc.data().image+"' style='height:250px;'>"+ 
    "<div class='card-body'><p class='card-text'>"+doc.data().fname+"</p></div></div>";
  });
});

更优的写法（性能更好） #

如果文档数量较多，建议先构建完整的HTML字符串，最后一次性赋值给innerHTML，减少DOM操作次数：

const list_div= document.querySelector('#list_div');
db.collection('student entry').get().then(function(querySnapshot){
  let html = '';
  querySnapshot.forEach(function(doc){
    html += "<div class='col-sm-4 mt-2 mb-1'>"+ 
    "<div class='card'>"+ 
    "<img src='"+doc.data().image+"' style='height:250px;'>"+ 
    "<div class='card-body'><p class='card-text'>"+doc.data().fname+"</p></div></div>";
  });
  // 一次性更新DOM
  list_div.innerHTML = html;
});

这样就能把数据库中所有student entry集合下的用户文档都渲染到页面上了。

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