Firebase注册用户数据未同步至Firestore问题求助

核心问题1：用户对象获取方式错误 #

createUserWithEmailAndPassword是异步方法，返回的是Promise，你直接解构const { user } = createUserWithEmailAndPassword(...)会得到undefined——因为Promise还未resolve。这导致传给createUserDocument的user参数无效，函数直接执行if (!user) return退出，根本没触发Firestore文档创建逻辑。

核心问题2：Firestore异步操作未正确等待 #

createUserDocument里的userRef.get()是异步操作，返回Promise，但你没加await，导致snapshot是Promise对象而非实际快照数据，!snapshot.exists判断逻辑异常，后续创建文档的代码无法正确执行。

核心问题3：重复初始化Firebase App #

你的配置代码同时用了模块化的initializeApp和compat的firebase.initializeApp，重复初始化App会引发未知冲突，干扰Firestore正常工作。

修复步骤 #

1. 修正注册函数的用户对象获取逻辑 #

在then回调中从userCredential里提取用户对象，替换原有的错误解构方式：

const register = (e) => {
  e.preventDefault();
  setError("");
  if (validatePassword()) {
    createUserWithEmailAndPassword(auth, email, password)
      .then((userCredential) => {
        // 从userCredential中正确获取用户对象
        const user = userCredential.user;
        sendEmailVerification(user)
          .then(() => {
            console.log(user);
            createUserDocument(user, { displayName });
            setTimeActive(true);
            navigate("/verify-email");
          })
          .catch((err) => alert(err.message));
      })
      .catch((err) => setError(err.message));
  }
  setEmail("");
  setPassword("");
  setConfirmPassword("");
  setDisplayName("");
};

2. 修复createUserDocument的异步等待逻辑 #

给userRef.get()和userRef.set()加上await，确保异步操作完成后再执行后续逻辑：

export const createUserDocument = async (user, additionalData) => {
  if (!user) return;

  const userRef = firestore.doc(`users/${user.uid}`);

  // 等待快照获取完成
  const snapshot = await userRef.get();

  if (!snapshot.exists) {
    const { email } = user;
    const { displayName } = additionalData;

    try {
      // 等待文档写入完成
      await userRef.set({
        displayName,
        email,
        createdAt: new Date(),
      });
    } catch (error) {
      console.log("Error in creating user", error);
    }
  }
};

3. 统一Firebase初始化方式 #

删除重复的App初始化代码，保留一种初始化逻辑（这里兼容你的现有代码，使用compat方式）：

// firebase
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
};

// 仅初始化一次Firebase App
const firebaseApp = firebase.initializeApp(firebaseConfig);
const auth = firebaseApp.auth();
const firestore = firebaseApp.firestore();

export default firestore;
export { auth };

export const createUserDocument = async (user, additionalData) => {
  if (!user) return;

  const userRef = firestore.doc(`users/${user.uid}`);

  const snapshot = await userRef.get();

  if (!snapshot.exists) {
    const { email } = user;
    const { displayName } = additionalData;

    try {
      await userRef.set({
        displayName,
        email,
        createdAt: new Date(),
      });
    } catch (error) {
      console.log("Error in creating user", error);
    }
  }
};

额外检查项 #

• 确认Firebase控制台已启用Firestore数据库，开发阶段可临时设置宽松安全规则（上线后务必修改为严格规则）：

  rules_version = '2';
  service cloud.firestore {
    match /databases/{database}/documents {
      match /{document=**} {
        allow read, write: if true;
      }
    }
  }
  

• 打开浏览器控制台查看是否有报错信息，比如权限不足、初始化失败等，这些信息能快速定位剩余问题。

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