Firebase Auth与Firestore关联用户的正确实现方式咨询

核心实现逻辑 #

Firebase Auth 和 Firestore 用户体系关联的最佳实践是用 Auth 返回的用户 UID 作为 Firestore users 集合的文档 ID，避免额外维护映射关系，同时方便后续权限控制和数据查询。

问题修复方案 #

你遇到的两个报错根因和修复方式如下：

1. await 关键字报错：await 只能在标记了 async 的函数内部使用，把存储用户数据的外层认证函数加上 async 标记即可解决
2. user 未定义：不要依赖局部作用域的 userCredentials 变量，用 Auth 提供的全局状态监听或者登录成功回调里的 user 实例即可

完整代码示例 #

1. 登录/注册成功后同步用户数据到 Firestore #

import { getAuth, signInWithEmailAndPassword, createUserWithEmailAndPassword } from "firebase/auth";
import { getFirestore, doc, setDoc } from "firebase/firestore";

const auth = getAuth();
const db = getFirestore();

// 登录函数必须加async标记
const handleLogin = async (email, password) => {
  try {
    const userCredential = await signInWithEmailAndPassword(auth, email, password);
    const user = userCredential.user;

    // 用用户UID作为文档ID写入数据，merge:true避免覆盖已有自定义字段
    await setDoc(doc(db, "users", user.uid), {
      name: user.displayName,
      email: user.email,
      avatar: user.photoURL || "",
      lastLoginTime: new Date()
    }, { merge: true });

    // 可将user实例存入全局状态（React Context/Vue Pinia/全局变量）供全应用使用
    window.currentUser = user;
  } catch (e) {
    console.error("操作失败：", e);
  }
}

// 注册逻辑和登录逻辑一致，拿到user后执行相同的写库操作即可
const handleRegister = async (email, password) => {
  try {
    const userCredential = await createUserWithEmailAndPassword(auth, email, password);
    const user = userCredential.user;
    await setDoc(doc(db, "users", user.uid), {
      name: user.displayName,
      email: user.email,
      avatar: user.photoURL || "",
      createTime: new Date()
    });
  } catch (e) {
    console.error("注册失败：", e);
  }
}

2. 全局获取登录用户实例 #

无需依赖局部作用域的变量，用 Firebase 自带的登录状态监听即可在任意位置获取当前登录用户：

import { getAuth, onAuthStateChanged } from "firebase/auth";
import { getFirestore, doc, getDoc } from "firebase/firestore";

const auth = getAuth();
const db = getFirestore();

onAuthStateChanged(auth, async (user) => {
  if (user) {
    // 已登录，可直接获取user实例，也可查询Firestore中存储的用户扩展数据
    const userDoc = await getDoc(doc(db, "users", user.uid));
    const userInfo = userDoc.data();
    console.log("当前登录用户信息：", userInfo);
    // 将用户信息存入全局状态供全页面使用
  } else {
    // 未登录，跳转登录页逻辑
  }
});

注意事项 #

• 禁止使用 addDoc 生成随机用户文档ID，用 Auth UID 作为文档ID可以直接配合 Firestore 安全规则限制用户仅能修改自己的文档，安全性更高
• 重复登录同步用户数据时必须加 { merge: true } 配置，避免覆盖之前存储的用户自定义字段，比如用户自行修改的昵称、个性签名等
• 不要把 userCredential 临时变量作为全局用户信息的来源，onAuthStateChanged 监听是官方推荐的稳定获取登录状态的方式，支持页面刷新后自动恢复登录状态

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