Firebase集合查询仅返回单条文档 如何传入目标文档ID查询

问题根源 #

你现有代码的逻辑存在核心错误，导致无法按传入ID拿到对应文档：

• 执行的query(collection(db, "movie"))是拉取movie集合下的所有文档，完全没有把路由拿到的id参数作为查询条件，查询逻辑和目标ID完全无关
• 遍历全量文档的过程中反复调用setDetailData(doc.data())，组件状态会被每一条遍历到的文档反复覆盖，最终只会保留遍历到的最后一条文档内容，所以无论传什么ID都只会拿到固定1条数据
• 错误捕获的挂载位置不对：Array.map是同步方法，不返回Promise，直接在后面链式调用.catch会触发语法错误
• 缺少组件卸载时的快照监听解绑逻辑，容易造成内存泄漏

推荐修复方案 #

直接通过文档ID定位单文档是性能最好、写法最简单的方案，不需要拉取全集合遍历：

import { doc, onSnapshot } from "firebase/firestore";
// 其他已有导入省略

const { id } = useParams();
const [detailData, setDetailData] = useState({});

useEffect(() => {
  // 直接构造对应ID的文档引用
  const targetDocRef = doc(db, "movie", id);
  // 监听单文档实时快照
  const unsubscribe = onSnapshot(
    targetDocRef,
    (docSnap) => {
      if (docSnap.exists()) {
        setDetailData(docSnap.data());
      } else {
        console.log("未查询到对应ID的文档");
        setDetailData({});
      }
    },
    (error) => {
      console.log("查询出错：", error);
    }
  );

  // 组件卸载时取消实时监听，避免内存泄漏
  return () => unsubscribe();
}, [id]);

备选方案（集合查询+ID过滤） #

如果业务场景必须走集合查询逻辑，需要用where条件做ID匹配，不要拉取全量文档后在前端遍历过滤，注意这种写法需要提前在Firebase控制台为movie集合创建文档ID的单字段索引：

import { collection, query, where, onSnapshot, documentId } from "firebase/firestore";
// 其他已有导入省略

const { id } = useParams();
const [detailData, setDetailData] = useState({});

useEffect(() => {
  const q = query(
    collection(db, "movie"),
    where(documentId(), "==", id)
  );
  const unsubscribe = onSnapshot(
    q,
    (querySnapshot) => {
      if (querySnapshot.empty) {
        console.log("未查询到对应ID的文档");
        setDetailData({});
        return;
      }
      setDetailData(querySnapshot.docs[0].data());
    },
    (error) => {
      console.log("查询出错：", error);
    }
  );

  return () => unsubscribe();
}, [id]);

提示：日常单文档查询优先选第一种直接定位文档路径的方案，不需要建索引，查询延迟更低，也不会产生多余的全集合读取费用。

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