注册用户时无法将信息存入Firestore，仅头像上传成功

核心问题 #

你的代码中混合使用了async/await和.then()链式调用，导致Firestore操作的错误无法被外层try/catch正确捕获，同时异步流程的执行顺序存在不确定性，最终引发"Something went wrong"提示且Firestore无数据写入。

修复步骤 #

1. 重构异步代码为纯async/await风格 #

将所有.then()链式调用替换为await，确保所有异步操作的错误都能被统一捕获，同时让代码逻辑更清晰：

const handleSubmit = async (e) => {
  setLoading(true);
  e.preventDefault();
  const displayName = e.target[0].value;
  const email = e.target[1].value;
  const password = e.target[2].value;
  const file = e.target[3].files[0];

  try {
    // 创建Auth用户
    const res = await createUserWithEmailAndPassword(auth, email, password);

    // 生成唯一存储路径
    const date = new Date().getTime();
    const storageRef = ref(storage, `${displayName + date}`);

    // 上传文件到Storage
    await uploadBytesResumable(storageRef, file);

    // 获取头像下载链接
    const downloadURL = await getDownloadURL(storageRef);

    // 更新Auth用户资料
    await updateProfile(res.user, {
      displayName,
      photoURL: downloadURL,
    });

    // 写入Firestore用户数据
    await setDoc(doc(db, "users", res.user.uid), {
      uid: res.user.uid,
      displayName,
      email,
      photoURL: downloadURL,
    });

    // 创建空的用户聊天文档
    await setDoc(doc(db, "userChats", res.user.uid), {});

    navigate("/");
  } catch (err) {
    console.error("注册错误详情:", err); // 打印具体错误信息用于排查
    setErr(true);
  } finally {
    setLoading(false); // 无论成功失败都重置加载状态
  }
};

2. 检查Firestore安全规则 #

确保你的Firestore规则允许已认证用户写入数据，默认规则会阻止所有读写操作。修改规则为：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // 允许用户读写自己的资料
    match /users/{userId} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }
    // 允许用户读写自己的聊天数据
    match /userChats/{userId} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }
  }
}

3. 排查控制台错误信息 #

打开浏览器开发者工具的控制台，查看console.error打印的具体错误内容，常见问题包括：

• Firestore权限不足（提示permission-denied）
• Storage下载URL获取失败
• 用户输入数据格式异常

次要问题修正 #

表单底部的登录链接存在路径错误，应将/register改为/login：

<p>
  You do have an account? <Link to="/login">Login</Link>
</p>

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