如何在Firebase回调中用await？用户创建后数据库写入未完成跳转问题

你的问题核心是没有等待Firestore的setDoc异步操作完成就执行了后续跳转，导致数据库写入未完成页面就切换了。以下是两种可行的修复方案：

方案1：在.then()回调中使用async/await #

直接将.then()的回调函数声明为async，这样就能在内部用await等待每个数据库写入操作完成：

await createUserWithEmailAndPassword(auth, email, password)
  .then(async (cred) => {
    console.log('User Created:', cred.user);

    // 等待第一个用户信息文档写入完成
    await setDoc(doc(db, 'users', cred.user.uid, 'userInfo', 'signupInfo'), {
      dob: dob,
      signupAge: age,
      tosAccepted: true,
    });

    // 等待第二个技术配置文档写入完成
    await setDoc(doc(db, 'users', cred.user.uid, 'technical', 'signup'), {
      passedGo: false,
      userDetailsComplete: false,
      phoneNoComplete: false,
      initialized: false
    });

    signupForm.reset();
    document.querySelector('#accCreated').removeAttribute('style', 'display: none;');
    // 跳转逻辑放在这，确保所有写入完成后再执行
  })

方案2：完全使用await链式（更推荐） #

混用await和.then()容易混淆，直接用await处理所有异步操作，代码更清晰：

try {
  // 等待用户创建完成
  const cred = await createUserWithEmailAndPassword(auth, email, password);
  console.log('User Created:', cred.user);

  // 写入用户信息文档
  await setDoc(doc(db, 'users', cred.user.uid, 'userInfo', 'signupInfo'), {
    dob: dob,
    signupAge: age,
    tosAccepted: true,
  });

  // 写入注册状态配置文档
  await setDoc(doc(db, 'users', cred.user.uid, 'technical', 'signup'), {
    passedGo: false,
    userDetailsComplete: false,
    phoneNoComplete: false,
    initialized: false
  });

  // 所有异步操作完成后，再执行表单重置、提示显示和跳转
  signupForm.reset();
  document.querySelector('#accCreated').removeAttribute('style', 'display: none;');
  // 这里添加你的跳转逻辑

} catch (error) {
  // 捕获注册或写入数据库时的错误
  console.error('操作失败:', error);
}

关键说明 #

• setDoc是异步函数，必须用await等待它执行完成，否则代码会直接跳过它执行后续逻辑。
• 你之前尝试在.then()内创建async函数但无法获取cred，是因为写法错误——直接把.then()的回调声明为async就能正常接收cred参数。
• 不要把写入逻辑放到onAuthStateChanged里，注册成功后用户已经登录，但该回调是监听状态变化，不适合处理一次性的注册后写入操作。

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