React中Firestore的getDocs函数无法稳定获取数据的问题排查

可能的问题与解决方案 #

1. 组件卸载导致异步请求中断

如果组件在getDocs请求完成前就被卸载（比如页面跳转、组件因条件渲染消失），异步操作会被直接终止，既不会走到debug 2也不会触发catch块，这是React单页应用中常见的隐性问题。

解决方法：使用AbortController给Firestore请求添加中止信号，在组件卸载时主动中止未完成的请求：

const getPosterList = async (signal) => {
  try {
    console.log('debug 1');
    // 传递中止信号给getDocs
    const data = await getDocs(postersCollectionRef, { signal });
    console.log('debug 2', data);
    const filteredData = data.docs.map((doc) => ({
      ...doc.data(),
      id: doc.id,
    }));
    setItemProduct(filteredData);
    console.log('debug 3', filteredData);
  } catch (err) {
    // 排除用户主动中止的情况
    if (err.name !== 'AbortError') {
      console.error('Error fetching poster list:', err);
      console.log('debug 4', err);
    }
  }
};

useEffect(() => {
  const controller = new AbortController();
  getPosterList(controller.signal);
  
  // 组件卸载时中止请求
  return () => controller.abort();
}, []);

2. React严格模式的重复执行干扰（开发环境）

在React开发环境的严格模式下，useEffect会被双重调用，第一次发起的异步请求可能会被第二次调用中断，导致第一次请求既不完成也不报错。这种情况仅存在于开发环境，生产环境不会出现。

可以临时注释掉index.js中的<StrictMode>标签验证是否为此原因，若问题消失则属于正常开发环境行为，无需修改代码。

3. Firestore集合引用的稳定性问题

如果postersCollectionRef是在组件内部动态创建的（比如每次渲染都重新生成），可能导致请求上下文异常。确保集合引用全局定义或用useMemo缓存：

import { collection, getFirestore } from "firebase/firestore";
import { useMemo } from "react";

// 全局初始化Firestore实例
const db = getFirestore();

const YourComponent = () => {
  // 用useMemo缓存集合引用，避免重复创建
  const postersCollectionRef = useMemo(() => collection(db, "categories"), []);
  
  // ... 其余组件逻辑
};

4. 网络请求被拦截/挂起

部分浏览器扩展、代理或网络环境可能偶尔拦截Firestore请求，导致请求处于pending状态无法完成。可以通过浏览器开发者工具的Network面板，筛选firestore.googleapis.com的请求，查看请求状态：

• 若请求长期处于pending，需排查网络环境或禁用可疑浏览器扩展；
• 若请求未发起，回到集合引用和Firebase初始化流程排查。

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