如何在Firebase Firestore中遍历集合内的文档？

当然可以遍历Firestore集合里的文档，下面是几种适配你需求的实现方式：

前提准备 #

确保你已在项目中完成Firebase初始化并引入Firestore SDK，示例代码如下：

// 假设已完成Firebase配置初始化
import { getFirestore, collection, getDocs } from "firebase/firestore";
const db = getFirestore();
// 替换成你的集合名称
const targetCollection = collection(db, "你的集合名");

方式1：使用普通for循环遍历 #

先获取集合的文档快照，再用for循环逐个处理文档数据：

async function loadAndShowDocs() {
  const querySnapshot = await getDocs(targetCollection);
  // 遍历快照中的所有文档
  for (let i = 0; i < querySnapshot.docs.length; i++) {
    const currentDoc = querySnapshot.docs[i];
    // 获取文档ID和数据
    const docId = currentDoc.id;
    const docData = currentDoc.data();
    // 将数据插入页面
    document.body.innerHTML += `<div>文档ID：${docId}，内容：${JSON.stringify(docData)}</div>`;
  }
}

// 执行函数
loadAndShowDocs();

方式2：使用Firestore快照自带的forEach遍历 #

这是Firestore官方推荐的简洁遍历方式：

async function loadAndShowDocs() {
  const querySnapshot = await getDocs(targetCollection);
  querySnapshot.forEach((doc) => {
    const docData = doc.data();
    document.body.innerHTML += `<div>文档ID：${doc.id}，内容：${JSON.stringify(docData)}</div>`;
  });
}

loadAndShowDocs();

方式3：用map批量生成DOM元素（性能更优） #

如果需要更灵活的DOM操作，可通过map生成元素数组后一次性插入页面：

async function loadAndShowDocs() {
  const querySnapshot = await getDocs(targetCollection);
  const docElements = querySnapshot.docs.map(doc => {
    const div = document.createElement('div');
    div.textContent = `文档ID：${doc.id}，内容：${JSON.stringify(doc.data())}`;
    return div;
  });
  // 一次性插入所有元素，减少DOM重绘
  document.body.append(...docElements);
}

loadAndShowDocs();

注意：如果集合数据量较大，建议配合limit()和startAfter()实现分页查询，避免一次性加载过多数据拖慢页面。

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