React+Firebase注册成功但Firestore未创建users集合问题

问题背景 #

用React和Firebase构建聊天应用，已配置邮箱密码认证、Storage和Firestore。用户注册成功后会出现在Firebase认证面板，但Firestore的users集合始终未创建。之前出现过权限错误，现在错误消失但问题依旧。

代码问题分析 #

你的Register组件核心问题出在UploadTask的回调处理逻辑：

• uploadBytesResumable不需要用await，它返回的是任务对象而非Promise，await在这里无意义。
• 你误将uploadTask.on的第二个参数作为完成回调，但它实际是state_changed的状态更新回调，会被多次触发，导致后续写入Firestore的逻辑执行时机混乱或未正确触发。
• 内部回调的错误无法被外部try/catch捕获，即使Firestore写入失败也不会触发错误提示，无法感知问题。

解决方案 #

改用UploadTask的Promise形式处理上传逻辑，配合async/await统一管理异步操作，确保所有错误都能被捕获，同时优化Storage路径避免文件覆盖。

修改后的Register.jsx代码 #

import React, { useState } from 'react';
import Add from "../img/addAvatar.png";
import { createUserWithEmailAndPassword, updateProfile } from "firebase/auth";
import { auth, db, storage } from "../firebase";
import { ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";
import { doc, setDoc } from "firebase/firestore";

const Register = () => {
  const [err, setErr] = useState(false)
  
  const handleSubmit = async (e) => {
    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];

    // 检查是否选择了头像文件
    if (!file) {
      setErr(true);
      return;
    }

    try {
      // 1. 创建Firebase认证用户
      const res = await createUserWithEmailAndPassword(auth, email, password);

      // 2. 上传头像到Storage，用用户UID作为路径前缀避免重名覆盖
      const storageRef = ref(storage, `users/${res.user.uid}/${file.name}`);
      const uploadTask = uploadBytesResumable(storageRef, file);

      // 等待上传完成
      await uploadTask;
      
      // 3. 获取头像下载链接
      const downloadURL = await getDownloadURL(uploadTask.snapshot.ref);

      // 4. 更新用户Profile信息
      await updateProfile(res.user, {
        displayName,
        photoURL: downloadURL,
      });

      // 5. 写入Firestore users集合
      await setDoc(doc(db, "users", res.user.uid), {
        uid: res.user.uid,
        displayName,
        email,
        photoURL: downloadURL
      });

      console.log("用户注册并写入Firestore成功");
      
    } catch(err) {
      console.error("注册错误详情:", err); // 打印错误日志方便排查
      setErr(true);
    }
  }

  return (
    <div className='formContainer'>
      <div className='formWrapper'>
        <span className='logo'>Chatgram</span>
        <span className='title'>Register</span>
        <form onSubmit={handleSubmit}>
          <input type="text" placeholder='name'/>
          <input type="email" placeholder='email'/>
          <input type="password" placeholder='password'/>
          <input style={{display:'none'}} type="file" id="file"/>
          <label htmlFor="file">
            <img src={Add} alt="" />
            <span>add a photo</span>
          </label>
          <button>register</button>
          {err && <span>!! something wrong</span>}
        </form>
        <p>you have an account? sign in</p>
      </div>
    </div>
  )
}

export default Register;

额外配置检查 #

1. Firestore安全规则
   默认规则仅允许管理员访问，需修改为允许认证用户写入自己的文档：

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {
      allow create, read, update: if request.auth != null && request.auth.uid == userId;
    }
  }
}

2. 错误排查提示
   注册失败时打开浏览器控制台，查看catch块打印的错误信息，可快速定位权限不足、字段格式错误等问题。

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