如何在React Native中正确读取并存储FireStore的数组数据？

问题原因拆解 #

• 第一种写法问题：db.collection().get() 是异步操作，你在then执行前就打印data变量时，请求还未返回结果，所以拿到的是空数组。
• 第二种React写法问题：请求逻辑直接写在组件顶层，每次组件渲染都会触发请求，请求成功调用setData会触发组件重新渲染，进入「渲染→发请求→setData→重新渲染」的死循环，导致API被持续调用。
• 第三种写法问题：get()返回的是Promise对象，你没有处理Promise的返回结果，直接打印变量只能拿到Promise实例本身，无法获取实际数据。

正确实现 #

普通JS环境

async function getMovieArray(code) {
  try {
    const docSnap = await db.collection('Rooms').doc(code).get();
    if (!docSnap.exists) {
      console.log('目标文档不存在');
      return [];
    }
    const fullDocData = docSnap.data();
    const movieArray = fullDocData.MovieArray || [];
    console.log('完整文档数据：', fullDocData);
    console.log('MovieArray数组：', movieArray);
    return movieArray;
  } catch (err) {
    console.error('数据获取失败：', err);
    return [];
  }
}

// 调用方式1：在async函数内用await获取结果
// const targetArray = await getMovieArray('你的文档code值');

// 调用方式2：用then获取结果
getMovieArray('你的文档code值').then(targetArray => {
  // 此处处理拿到的数组数据
})

React环境

用useEffect包裹请求逻辑，通过依赖项控制请求触发时机，避免死循环：

import { useState, useEffect } from 'react';

// 组件内部代码
function YourComponent({ code }) {
  const [movieArray, setMovieArray] = useState([]);
  const [fullDocData, setFullDocData] = useState({});
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const docSnap = await db.collection('Rooms').doc(code).get();
        if (docSnap.exists) {
          const data = docSnap.data();
          setFullDocData(data);
          setMovieArray(data.MovieArray || []);
        }
      } catch (err) {
        console.error('获取数据失败：', err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [code]); // 仅当code变量变化时才会重新触发请求

  if (loading) return <div>加载中...</div>;

  // 后续渲染逻辑可直接使用movieArray和fullDocData变量
}

注意事项 #

• 所有Firestore的读写操作都是异步的，必须等待异步执行完成后拿到的结果才是有效数据，不能在请求发起后立刻读取变量值。
• React中所有副作用类操作（如接口请求、定时器等）需要放到useEffect中执行，严格配置依赖项，避免触发无限渲染。
• 建议增加文档存在性判断，避免后续调用不存在的字段时报错。

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