Angular：如何等待布尔函数执行完成以验证Firestore用户管理员权限？

你遇到的核心问题其实是Firestore的数据读取是异步操作，JavaScript会不等这个异步操作完成就继续往下执行后续代码，导致你的管理员判断逻辑还没拿到结果，后面的流程就已经跑起来了，自然会出现“明明是管理员却判断失败”的情况。

我给你两种最常用的解决思路，都是围绕正确等待异步操作完成来做的：

方法一：用async/await让代码“看起来像同步” #

这是最直观的写法，把异步操作变成“等待完成后再继续”的逻辑，非常容易理解。

先看你可能写错的错误示例（大部分人第一次都会犯这个错）：

function checkIfAdmin(userId) {
  let isAdmin = false;
  // Firestore的get是异步的，这里会直接往下走，不会等then里的逻辑执行
  db.collection('admins').doc(userId).get()
    .then(doc => {
      isAdmin = doc.exists;
    });
  return isAdmin; // 这里返回的是初始值false，因为get还没完成！
}

// 调用的时候也没等结果，直接判断
if (checkIfAdmin(currentUser.uid)) {
  // 这里永远不会执行管理员逻辑，因为checkIfAdmin直接返回了false
}

改成正确的async/await写法：

// 把判断函数改成async函数，里面用await等待Firestore返回结果
async function checkIfAdmin(userId) {
  const adminDoc = await db.collection('admins').doc(userId).get();
  return adminDoc.exists; // 现在会等get完成后再返回正确的结果
}

// 调用的时候，必须在async函数里用await，或者用then处理
async function handleUserAuth() {
  const currentUser = auth.currentUser; // 假设这是你的登录用户对象
  if (!currentUser) return; // 先判断用户是否登录

  const isAdmin = await checkIfAdmin(currentUser.uid);
  if (isAdmin) {
    // 这里就是管理员专属逻辑，比如跳转到后台页面、显示管理员按钮
    console.log("欢迎管理员！");
  } else {
    // 普通用户逻辑
    console.log("欢迎普通用户！");
  }
}

// 最后调用这个处理函数
handleUserAuth();

方法二：用Promise.then链式调用（适合不能用async/await的场景） #

如果你的运行环境不支持async/await（不过现在大部分环境都支持了），可以用Promise的链式调用，把所有依赖判断结果的逻辑都放在then的回调里：

function checkIfAdmin(userId) {
  // 直接返回Firestore的Promise对象
  return db.collection('admins').doc(userId).get()
    .then(doc => {
      return doc.exists;
    });
}

// 调用的时候，用then接收结果
const currentUser = auth.currentUser;
if (currentUser) {
  checkIfAdmin(currentUser.uid)
    .then(isAdmin => {
      if (isAdmin) {
        // 管理员逻辑
      } else {
        // 普通用户逻辑
      }
    })
    .catch(error => {
      // 别忘了处理错误！比如Firestore权限不足、网络问题
      console.error("检查管理员身份失败：", error);
    });
}

几个关键注意点 #

• 所有依赖管理员判断结果的代码，必须放在异步操作完成后的回调里（要么是await之后，要么是then的回调函数里），绝对不能直接写在调用checkIfAdmin的后面，不然还是会拿到未更新的结果。
• 一定要加错误处理（catch或者try/catch），避免因为网络问题、Firestore权限设置错误等导致程序崩溃。
• 如果是在React/Vue这类框架里使用，记得结合状态管理来更新UI。比如在React里用useState存isAdmin的状态，用useEffect来执行判断逻辑，等拿到结果后再更新状态渲染页面。

举个React的简单示例：

import { useState, useEffect } from 'react';
import { auth, db } from './firebaseConfig';

function UserDashboard() {
  const [isAdmin, setIsAdmin] = useState(null); // 用null表示正在加载
  const [user, setUser] = useState(null);

  useEffect(() => {
    // 监听用户登录状态
    const unsubscribe = auth.onAuthStateChanged(async (currentUser) => {
      if (currentUser) {
        setUser(currentUser);
        try {
          const adminDoc = await db.collection('admins').doc(currentUser.uid).get();
          setIsAdmin(adminDoc.exists);
        } catch (error) {
          console.error("检查管理员失败：", error);
          setIsAdmin(false);
        }
      } else {
        setUser(null);
        setIsAdmin(false);
      }
    });

    return unsubscribe; // 清理监听
  }, []);

  if (user === null) {
    return <div>请先登录</div>;
  }

  if (isAdmin === null) {
    return <div>加载中...</div>;
  }

  return (
    <div>
      <h2>欢迎回来，{user.displayName}</h2>
      {isAdmin && <button>进入管理员后台</button>}
    </div>
  );
}

export default UserDashboard;

核心就是一句话：别让代码“抢跑”，等Firestore的异步操作返回结果后，再执行依赖这个结果的逻辑。

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