React Native调用Cloud Firestore get()返回Promise无法存储数组数据问题

Firestore的get()方法是异步操作，返回的是Promise对象，直接赋值给变量拿到的只是Promise实例，不是请求返回的真实数据，你打印出来的_U/_V等字段是React Native环境下Promise的内部私有属性，不能直接读取使用。

异步获取的数据不能直接赋值给普通常量，一是异步请求完成前常量已经初始化完成，赋值不会生效；二是普通常量更新不会触发组件重新渲染，页面内容无法同步更新。推荐在函数组件中结合useState存储数据、useEffect触发请求，有两种常用写法：

1. async/await 写法（更简洁易读） #

import { useState, useEffect } from 'react';
import firebase from '../你的firebase配置文件路径';

const YourComponent = () => {
  // 用state存储拿到的set数组
  const [workoutSets, setWorkoutSets] = useState([]);

  // 封装异步请求方法
  const fetchWorkoutData = async () => {
    try {
      // 先判断用户登录状态，避免uid为空报错
      const currentUser = firebase.auth().currentUser;
      if (!currentUser) return;
      
      // await等待请求完成拿到文档快照
      const docSnapshot = await firebase.firestore()
        .collection("workoutExercises")
        .doc(currentUser.uid)
        .get();
      
      if (docSnapshot.exists) {
        // 提取文档数据
        const docData = docSnapshot.data();
        // 取set字段存入state
        setWorkoutSets(docData.set || []);
        console.log('获取到的set数组：', docData.set);
      } else {
        console.log('对应文档不存在');
      }
    } catch (err) {
      console.error('获取数据失败：', err);
    }
  };

  // 组件挂载时执行请求
  useEffect(() => {
    fetchWorkoutData();
  }, []);

  // 页面渲染直接使用workoutSets即可
  return <>{/* 你的页面渲染逻辑 */}</>
}

2. Promise.then 写法 #

useEffect(() => {
  const currentUser = firebase.auth().currentUser;
  if (!currentUser) return;

  firebase.firestore()
    .collection("workoutExercises")
    .doc(currentUser.uid)
    .get()
    .then(docSnapshot => {
      if (docSnapshot.exists) {
        const docData = docSnapshot.data();
        setWorkoutSets(docData.set || []);
        console.log('获取到的set数组：', docData.set);
      }
    })
    .catch(err => {
      console.error('获取数据失败：', err);
    })
}, []);

如果使用的是Firebase v9+模块化SDK，写法会和上面的v8版本有差异，需要导入getDoc、collection等对应方法调用。

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