如何等待Firebase查询返回结果后再退出函数？

嘿，这个问题我太熟了——Firebase的异步特性确实容易让刚上手的开发者踩坑！别担心，完全有办法让你的函数等待Firebase查询结果返回后再执行后续操作，核心就是利用Firebase API返回的Promise，下面给你两种主流实现方式：

1. 用async/await（推荐，代码更直观） #

现代JavaScript的async/await语法可以让异步代码看起来像同步代码，非常适合处理Firebase的异步查询。只要把你的函数标记为async，然后在Firebase查询前加上await关键字，函数就会暂停执行，直到查询结果返回。

举个Firestore获取文档的例子：

// 定义一个async函数
async function fetchUserProfile(userId) {
  try {
    // 用await等待Firebase查询完成
    const docRef = firebase.firestore().collection('users').doc(userId);
    const docSnapshot = await docRef.get();

    if (docSnapshot.exists) {
      const userData = docSnapshot.data();
      console.log('获取到用户数据:', userData);
      // 在这里处理完数据后再返回
      return userData;
    } else {
      console.log('未找到该用户');
      return null;
    }
  } catch (error) {
    console.error('查询失败:', error);
    throw error; // 抛出错误让调用者处理
  }
}

// 调用这个async函数
fetchUserProfile('user_123')
  .then(userData => {
    // 这里拿到的就是等待后的结果，可以继续后续操作
    console.log('最终返回的用户数据:', userData);
  })
  .catch(error => {
    // 处理查询过程中的错误
    console.error('处理错误:', error);
  });

2. 用Promise链式调用（兼容旧环境或偏好链式写法） #

如果你的项目环境不支持async/await，或者你更习惯链式写法，可以直接利用Firebase API返回的Promise，通过.then()来处理查询结果，确保后续操作在结果返回后执行。

同样以Firestore为例：

function fetchUserProfile(userId) {
  // 返回Firebase查询的Promise，让调用者可以链式调用
  return firebase.firestore().collection('users').doc(userId).get()
    .then(docSnapshot => {
      if (docSnapshot.exists) {
        const userData = docSnapshot.data();
        console.log('获取到用户数据:', userData);
        return userData;
      } else {
        console.log('未找到该用户');
        return null;
      }
    })
    .catch(error => {
      console.error('查询失败:', error);
      throw error;
    });
}

// 调用函数，通过.then()等待结果
fetchUserProfile('user_123')
  .then(userData => {
    console.log('最终返回的用户数据:', userData);
  })
  .catch(error => {
    console.error('处理错误:', error);
  });

特殊情况：实时监听（onSnapshot） #

如果你用的是实时监听onSnapshot（会持续触发数据更新），但只想等待首次快照返回，可以把它包装成一个Promise：

async function waitForFirstUserSnapshot(userId) {
  return new Promise((resolve, reject) => {
    // 订阅实时快照
    const unsubscribe = firebase.firestore().collection('users').doc(userId)
      .onSnapshot(docSnapshot => {
        unsubscribe(); // 只需要首次结果，立即取消订阅
        resolve(docSnapshot.data());
      }, error => {
        reject(error);
      });
  });
}

// 调用获取首次快照
waitForFirstUserSnapshot('user_123')
  .then(firstData => {
    console.log('首次获取到的用户数据:', firstData);
  })
  .catch(error => {
    console.error('获取失败:', error);
  });

核心思路就是：Firebase的大部分读写API本身就返回Promise，我们只需要用async/await或者.then()来“等待”这个Promise完成，就能确保函数在拿到结果后再执行后续逻辑啦。

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