React Query 结合 Firestore 时fetch函数返回undefined问题排查

你的fetchProduct函数存在几个关键错误，导致React Query无法获取到正确数据：

核心错误点 #

1. 错误的错误捕获位置
   querySnapshot.forEach()是同步方法，没有返回Promise，所以后面的.catch()完全无效，无法捕获getDocs的异步错误。

2. 误用React状态管理
   在数据获取函数里调用setNotes是完全错误的：

• React Query的useQuery会自行管理返回的data状态，不需要手动调用组件状态钩子
• setNotes是异步操作，当你return notes时，状态还未更新，自然返回初始的undefined

3. 数据收集逻辑错误
   你定义了arr数组但完全没有使用，反而用setNotes每次覆盖为单个文档的数据，最后即使状态更新，也只会得到最后一个文档的内容，而非所有数据的集合。

4. 手动调用的误解
   手动调用时你看到的"正常运行"，其实是setNotes异步更新组件状态后的结果，并非fetchProduct函数的返回值，实际上此时函数返回的依然是undefined。

修正后的代码 #

const fetchProduct = async () => {
  try {
    const querySnapshot = await getDocs(collection(db, "notes"));
    const notes = [];
    querySnapshot.forEach((doc) => {
      // 建议带上文档ID，方便后续CRUD操作
      notes.push({ id: doc.id, ...doc.data() });
    });
    return notes;
  } catch (error) {
    console.log(error);
    // 抛出错误让React Query捕获，触发isError状态
    throw error;
  }
};

修正说明 #

• 用try/catch包裹异步的getDocs调用，正确捕获Firestore请求错误
• 移除所有组件状态操作，让函数成为纯数据获取函数，只负责返回数据
• 正确收集所有文档数据到数组并返回，确保数据完整性
• 抛出错误而非返回null，让React Query能正确处理错误状态（触发isError并填充error字段）

你的useQuery调用无需修改，修正后data会正确返回所有notes的数组。

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