React-Native中无法将Firestore文档数据加载到变量中

核心问题 #

1. setState异步特性：setEvent(fetchedEvent)是异步操作，调用后不会立刻更新event状态，所以紧接着的console.log打印的还是初始的undefined。
2. 未处理加载状态：组件首次渲染时event未定义，此时Firestore请求还在进行中，页面直接使用event就会显示undefined；重启后可能是浏览器缓存了请求结果，请求完成速度极快，才偶然填充了数据。

具体修复步骤 #

1. 正确跟踪状态变化 #

不要在调用setEvent后立刻打印event，通过useEffect监听event的变化来查看更新后的值：

useEffect(() => {
  console.log("Updated Event: ", event);
}, [event]); // 仅当event状态变化时执行

2. 增加加载状态，避免页面显示undefined #

给组件添加加载状态，在请求完成前显示加载提示，同时处理文档不存在的情况：

const [event, setEvent] = useState();
const [isLoading, setIsLoading] = useState(true); // 新增加载状态

const getEvent = async (dbx) => {
  const eventDoc = doc(dbx, 'events', eventId);
  try {
    const eventSnapshot = await getDoc(eventDoc);
    if(eventSnapshot.exists()) {
      const fetchedEvent = eventSnapshot.data();
      setEvent(fetchedEvent);
    } else {
      console.log("Document does not exist")
    }
  } catch(error) {
    console.log(error)
  } finally {
    setIsLoading(false); // 请求结束后终止加载状态
  }
} 

useEffect(()=>{
  getEvent(db)
},[])

// 页面渲染逻辑
if(isLoading) {
  return <div>加载中...</div>;
}

if(!event) {
  return <div>事件不存在</div>;
}

// 正常渲染详情内容
return (
  <div>
    <h1>{event.title}</h1>
    {/* 其他事件详情字段 */}
  </div>
);

3. 确认eventId的有效性 #

检查eventId是否在组件挂载时已正确获取（比如从路由参数、props传递），避免因eventId为空或错误，导致请求到不存在的Firestore文档。

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