Expo托管React Native连接Firestore v9.6.7返回未完成Promise问题

你在Expo托管的React Native应用中接入v9.6.7版本Firestore时，代码存在两个明确问题：

• 核心逻辑错误：getDocs() 是异步接口，调用后会立刻返回一个处于待处理状态的Promise对象，不会同步返回查询得到的快照结果。你直接打印该方法的返回值，拿到的就是如下处于pending状态的Promise实例，并非实际的Firestore集合数据：

Promise {
"_U": 0,
"_V": 0,
"_W": null,
"_X": null,
}

• 语法疏漏：你贴出的firebaseConfig配置对象里，apiKey字段行尾缺失逗号，代码运行时会直接触发语法报错。

你需要通过异步写法等待Promise返回结果后，再读取和处理查询数据，两种常用写法如下：

方案1：async/await 写法（推荐，可读性更高） #

将查询逻辑封装到异步函数中，使用await等待查询结果返回，同时做好错误捕获：

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from "firebase/firestore"; 

// 补全配置信息，注意每个字段末尾的逗号
const firebaseConfig = {
    apiKey: "你的apiKey",
    authDomain: "你的authDomain",
    projectId: "你的projectId",
    storageBucket: "你的storageBucket",
    messagingSenderId: "你的messagingSenderId",
    appId: "你的appId",
    measurementId: "你的measurementId"
};
  
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// 封装异步查询函数
const getUsersData = async () => {
  try {
    const querySnapshot = await getDocs(collection(db, "Users"));
    // 遍历输出集合内的所有文档数据
    querySnapshot.forEach((doc) => {
      console.log("文档ID：", doc.id, "文档数据：", doc.data());
    });
  } catch (err) {
    // 捕获网络异常、权限不足等错误
    console.error("查询Firestore数据失败：", err);
  }
}

// 触发查询
getUsersData();

export { db }

方案2：Promise.then 链式调用写法 #

如果不使用async/await，也可以通过Promise原生的then回调获取结果：

// 替换原来的同步查询、打印代码
getDocs(collection(db, "Users"))
  .then((querySnapshot) => {
    querySnapshot.forEach((doc) => {
      console.log("文档ID：", doc.id, "文档数据：", doc.data());
    });
  })
  .catch((err) => {
    console.error("查询Firestore数据失败：", err);
  });

• 不要把数据查询逻辑直接写在模块顶层同步执行，在React Native组件中建议把查询逻辑放到useEffect钩子中触发，避免组件重渲染时重复发起请求产生不必要的资源消耗。
• 测试前请确认Firestore安全规则配置正确，未完成登录鉴权逻辑的测试阶段，可以临时开放测试访问权限，避免出现权限拒绝的报错。

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