如何在React中通过Firebase Firestore按ID获取单个文档？

场景说明 #

需求是从polja集合中匹配对应条件，仅拉取单条目标文档数据。当前写的实现代码运行后直接报错，相关参考素材为实际运行的报错截图、线上库的数据库结构截图。

现有问题代码 #

const aref = firebase
  .firestore()
  .collection("polja")
  .where("id", "==", match.params.id);
console.log(aref);

function getIt() {
  const item = [];
  setLoading(true);
  aref.get().then((doc) => {
    const data = doc.data();
    setItem(item);
    console.log(item);
    setLoading(false);
  });
}

useEffect(() => {
  getIt();
}, []);

问题根源定位 #

两处逻辑错误直接触发运行崩溃：

• Firestore返回值类型认知错误：where()链式调用完成后生成的是查询对象，调用get()方法返回的是QuerySnapshot类型的快照集合，并非单个文档对象。直接对着快照集合调用data()方法会抛出类型错误，因为集合快照本身不存在该方法。
• 数据赋值逻辑漏写：代码中定义了空的item数组，从查询结果中提取出文档数据后，压根没有把数据赋值给item，反而把始终为空的item传入setItem方法，就算没有类型报错，最终拿到的组件状态值也全是空值。

修复后可正常运行的代码实现 #

const aref = firebase
  .firestore()
  .collection("polja")
  .where("id", "==", match.params.id);

function getIt() {
  setLoading(true);
  aref.get()
    .then((querySnapshot) => {
      // 从快照集合中取出匹配到的第一份文档
      const targetDoc = querySnapshot.docs[0];
      // 提取文档内存储的字段数据
      const data = targetDoc.data();
      // 将提取到的数据更新到组件状态
      setItem(data);
      console.log(data);
      setLoading(false);
    })
    .catch((error) => {
      // 补全异常捕获逻辑，避免未处理的Promise导致运行时崩溃
      console.error("目标文档查询失败", error);
      setLoading(false);
    });
}

useEffect(() => {
  getIt();
}, []);

优化建议：如果数据库中存储的id字段值和对应文档的文档ID完全匹配，可以省去条件查询环节，直接通过文档ID定位读取，减少不必要的查询开销：

// 直接通过文档ID定位单条文档，无集合全量查询成本
const targetRef = firebase.firestore().collection("polja").doc(match.params.id);
targetRef.get().then(docRef => {
  if(docRef.exists) {
    setItem(docRef.data())
  }
})

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