React项目中getDocs无法从Firestore返回数据的问题排查

问题根源 #

你遇到的问题核心是**response.ok的判断逻辑和 Firebase Firestore 响应的状态码不匹配**。response.ok仅在 HTTP 状态码处于 200-299 区间时返回true，但 Firestore 的 REST API 有时会返回如 304（资源未修改）这类非 2xx 但实际数据正常的状态码，这会触发你的错误抛出逻辑，导致无法获取到数据。

另外，如果你的代码混用了 Firebase SDK 和原生fetch请求，也可能出现这种判断逻辑不适用的情况——Firebase SDK 的数据获取方法（如getDocs）不会返回 HTTP 响应对象，自然不存在response.ok属性，强行判断会直接报错。

解决方法 #

方法1：调整 HTTP 请求的错误判断逻辑

如果是直接调用 Firestore 的 REST API，修改判断条件，允许合法的非 2xx 状态码：

async function projectsLoader() {
  const response = await fetch('https://firestore.googleapis.com/v1/projects/your-project/databases/(default)/documents/projects');
  
  // 允许200-299和304状态码，避免误判
  if (!(response.ok || response.status === 304)) {
    throw new Error("Could not fetch projects");
  }
  
  const data = await response.json();
  return data;
}

方法2：改用 Firebase SDK 进行数据获取（更推荐）

直接使用 Firebase 官方 SDK 操作 Firestore，无需手动处理 HTTP 响应状态，代码更简洁且不易出错：

import { getDocs, collection } from "firebase/firestore";
import { db } from "./path/to/firebase-config";

async function projectsLoader() {
  try {
    const querySnapshot = await getDocs(collection(db, "projects"));
    // 将快照转换为可用的项目数组
    const projects = querySnapshot.docs.map(doc => ({
      id: doc.id,
      ...doc.data()
    }));
    return projects;
  } catch (error) {
    throw new Error("Could not fetch projects");
  }
}

验证步骤 #

1. 先打印完整的响应对象（console.log(response)），查看实际的状态码和响应内容，确认是否是状态码导致的误判。
2. 通过 Firebase 控制台的规则模拟器，验证安全规则是否确实允许当前请求的读取操作。

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