如何在Webpack多JS文件中正确使用Firebase的onAuthStateChange

你遇到的核心问题是异步状态的共享矛盾：onAuthStateChanged是异步触发的，而其他模块导入全局变量时，用户数据还未加载完成。下面是几种可落地的解决方案，能让你在项目任意地方复用用户状态：

方案1：发布订阅模式（观察者模式） #

创建独立的用户状态管理模块，让其他组件订阅用户状态变化，数据更新时自动通知所有订阅者，完美适配多模块需要响应状态的场景。

代码示例（userState.js）：

import { auth } from './firebaseConfig';
import { onAuthStateChanged } from 'firebase/auth';
import { getDoc, doc } from 'firebase/firestore';
import { db } from './firebaseConfig';

// 存储订阅者回调
const subscribers = [];
let currentUserData = null;

// 通知所有订阅者更新状态
function notifySubscribers() {
  subscribers.forEach(callback => callback(currentUserData));
}

// 初始化Auth监听
onAuthStateChanged(auth, async (user) => {
  if (user) {
    const userDoc = await getDoc(doc(db, "users", user.uid));
    currentUserData = { uid: userDoc.id, ...userDoc.data() };
  } else {
    currentUserData = null;
  }
  notifySubscribers();
});

// 对外暴露订阅方法，支持取消订阅
export function subscribeToUserState(callback) {
  // 立即触发一次，传递当前已有状态
  callback(currentUserData);
  subscribers.push(callback);
  return () => {
    const index = subscribers.indexOf(callback);
    if (index !== -1) subscribers.splice(index, 1);
  };
}

// 获取当前用户状态
export function getCurrentUser() {
  return currentUserData;
}

在header.js中使用：

import { subscribeToUserState } from './userState';

// 订阅用户状态变化
const unsubscribe = subscribeToUserState((userData) => {
  if (userData) {
    elements.userFirstname.textContent = userData.firstname;
    elements.loginButton.style.display = "none";
    elements.userDropdown.style.display = "block";
  } else {
    elements.loginButton.style.display = "block";
    elements.userDropdown.style.display = "none";
  }
});

// 单页应用切换页面时可取消订阅
// window.addEventListener('beforeunload', unsubscribe);

页面主体模块只需同样调用subscribeToUserState，就能自动响应用户状态变化。

方案2：Promise封装用户状态 #

如果你的场景更偏向“一次性获取用户数据”，可以用Promise封装，让其他模块通过await安全获取最新数据。

代码示例（userState.js）：

import { auth } from './firebaseConfig';
import { onAuthStateChanged } from 'firebase/auth';
import { getDoc, doc } from 'firebase/firestore';
import { db } from './firebaseConfig';

let userPromise = null;
let currentUserData = null;

function createUserPromise() {
  return new Promise((resolve) => {
    onAuthStateChanged(auth, async (user) => {
      if (user) {
        const userDoc = await getDoc(doc(db, "users", user.uid));
        currentUserData = { uid: userDoc.id, ...userDoc.data() };
        resolve(currentUserData);
      } else {
        currentUserData = null;
        resolve(null);
      }
    });
  });
}

export async function getUserData() {
  if (!userPromise) {
    userPromise = createUserPromise();
  }
  // 已有数据直接返回，避免重复等待
  if (currentUserData !== null) {
    return currentUserData;
  }
  return userPromise;
}

页面主体模块使用：

import { getUserData } from './userState';

async function renderUserContent() {
  const userData = await getUserData();
  if (userData) {
    document.getElementById('user-profile').textContent = `欢迎，${userData.firstname}`;
  } else {
    document.getElementById('user-profile').textContent = "请登录";
  }
}

renderUserContent();

方案3：状态管理类（结构化方案） #

项目较大时，用类封装状态管理逻辑，提供更清晰的API和单例模式：

import { auth } from './firebaseConfig';
import { onAuthStateChanged } from 'firebase/auth';
import { getDoc, doc } from 'firebase/firestore';
import { db } from './firebaseConfig';

class UserState {
  constructor() {
    this.currentUser = null;
    this.subscribers = [];
    this.initAuthListener();
  }

  async initAuthListener() {
    onAuthStateChanged(auth, async (user) => {
      if (user) {
        const userDoc = await getDoc(doc(db, "users", user.uid));
        this.currentUser = { uid: userDoc.id, ...userDoc.data() };
      } else {
        this.currentUser = null;
      }
      this.notifySubscribers();
    });
  }

  notifySubscribers() {
    this.subscribers.forEach(callback => callback(this.currentUser));
  }

  subscribe(callback) {
    callback(this.currentUser);
    this.subscribers.push(callback);
    return () => {
      const index = this.subscribers.indexOf(callback);
      if (index !== -1) this.subscribers.splice(index, 1);
    };
  }

  getCurrentUser() {
    return this.currentUser;
  }
}

// 导出单例实例，确保全局唯一
export const userState = new UserState();

使用方式：

import { userState } from './userState';

// 订阅状态变化
const unsubscribe = userState.subscribe((user) => {
  // 处理用户状态更新
});

// 获取当前用户
const currentUser = userState.getCurrentUser();

关键思路总结 #

• 避免直接依赖全局变量的同步赋值，Firebase Auth状态是异步获取的，同步变量无法保证数据就绪
• 通过发布订阅或Promise的异步友好方式，让其他模块能安全获取/监听用户状态
• 将用户状态管理抽离到独立模块，与DOM操作解耦，大幅提升代码可扩展性

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