为什么React Native+Firebase项目中异步函数无法给外部变量赋值？

输出为空的核心原因是异步函数的执行时机和同步代码的执行顺序差异：

• getBestTutors是异步函数，调用后不会阻塞后续同步代码执行，console.log(bestTutors)会在Firebase请求完成、赋值操作执行之前就运行，此时bestTutors还是初始的空数组。
• 之前用.then()未生效，大概率是没有把后续依赖异步结果的逻辑放到.then()回调中。

不用await可以直接用Promise的.then()回调处理结果，示例如下：

let bestTutors = [];

const getBestTutors = () => {
  // 直接返回Promise实例
  return getDoc(docRef).then(snapshot => {
    bestTutors = snapshot.data().list;
    // 所有依赖bestTutors的逻辑都要放到这个回调链里
    console.log(bestTutors); // 此处可以拿到正确的返回值
  })
}

getBestTutors();
// 此处依旧不能直接打印bestTutors，会拿到初始空数组

注意：只要是异步IO操作，无论用不用await，都不可能在同步代码位置直接拿到异步返回的结果，必须把依赖结果的逻辑放到异步回调/.then()回调/await之后的代码块里

普通JS场景 #

如果要给外部变量赋值并使用，所有依赖该变量的逻辑都要放到异步流程结束后的节点执行：

let bestTutors = [];

const getBestTutors = async () => {
  const snapshot = await getDoc(docRef);
  bestTutors = snapshot.data().list;
  // 后续使用bestTutors的逻辑放在这里执行
  handleBestTutors(bestTutors);
}

getBestTutors();

React Native组件场景 #

如果是在组件内使用该数据，不要用普通全局变量存储，要结合组件状态管理，比如搭配useState：

import { useState, useEffect } from 'react';

const YourComponent = () => {
  const [bestTutors, setBestTutors] = useState([]);

  const getBestTutors = async () => {
    const snapshot = await getDoc(docRef);
    setBestTutors(snapshot.data().list);
  }

  useEffect(() => {
    // 组件挂载时拉取数据
    getBestTutors();
  }, []);

  // 渲染时直接用bestTutors即可，初始是空数组，拉取完成后会自动触发重渲染
}

如果确实需要跨组件全局共享数据，可以用状态管理库（比如Zustand、Redux）统一存储，不要依赖普通全局变量的赋值时机。

内容的提问来源于stack exchange，提问作者González López David