React项目从Firestore数据库获取数据无返回的问题求解

1. 先处理Firebase初始化逻辑 #

你当前把Firebase初始化直接写在业务组件中，容易出现重复初始化的问题，建议单独抽离配置文件：

• 新建src/firebase/config.js，写入以下代码：

import firebase from "firebase/app";
import "firebase/firestore";

const firebaseConfig = {
  apiKey: "你的实际apiKey",
  authDomain: "xxx.firebaseapp.com",
  projectId: "xxx",
  storageBucket: "xxx.appspot.com",
  messagingSenderId: "xxx",
  appId: "xxx",
  measurementId: "xxx",
};

// 避免重复初始化
if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

export const db = firebase.firestore();
db.settings({ timestampsInSnapshots: true });

• 之后在Recipe组件中删除原有的初始化代码，直接导入db即可：

import { db } from '../firebase/config';

2. 修正异步逻辑的调试方式 #

get()是异步请求，你当前写在get()外面的console.log(this.state.recipes)执行时请求还没返回，所以必然是空数组，不是没拿到数据，是打印时机不对。修改componentDidMount逻辑如下：

componentDidMount() {
  db.collection("recipes")
    .get()
    .then((snapshot) => {
      // 先打印快照确认有没有拿到数据
      console.log('查询到的文档数量：', snapshot.size);
      if (snapshot.empty) {
        console.log('没有匹配的文档');
        return;
      }
      const recipeList = [];
      snapshot.forEach((doc) => {
        let recipe = doc.data();
        recipe.key = doc.id; // 建议用文档id作为key，不要直接存doc对象
        recipeList.push(recipe);
      });
      // 统一更新state，避免循环调用setState出现状态不同步问题
      this.setState({ recipes: recipeList }, () => {
        // setState的回调里打印才能拿到最新的state
        console.log('更新后的菜谱数据：', this.state.recipes);
      });
    })
    .catch(err => {
      // 一定要加错误捕获，能直接看到请求失败的原因
      console.error('获取数据失败：', err);
    });
}

3. 检查常见配置错误 #

• 集合名拼写：你提到曾调用db.collection("recipe")查询，代码里写的是db.collection("recipes")，确认Firestore控制台里的集合名拼写完全一致，大小写也要匹配
• 权限规则问题：默认Firestore规则禁止未授权读写，会导致请求被拦截，你可以先临时把规则改为测试模式验证（生产环境要重新配置权限）：
  进入Firebase控制台→Firestore数据库→规则，替换为以下内容后发布：

  rules_version = '2';
  service cloud.firestore {
    match /databases/{database}/documents {
      match /{document=**} {
        allow read, write: if true;
      }
    }
  }
  

• 确认文档存在：检查Firestore控制台对应集合下有没有已创建的文档，空集合查询不会返回任何结果

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