在React中通过Firebase注册用户时，能否收集姓名、电话等额外信息？

当然可以收集名字、姓氏、电话和地址这类额外信息，但Firebase Auth的updateProfile方法仅支持更新官方预设的字段（displayName、photoURL），自定义字段无法通过该方法存储在Auth用户对象中。要实现需求，你需要借助Firebase的数据库服务（Firestore或实时数据库）来存储这些额外信息，步骤如下：

解决方案步骤 #

1. 初始化Firestore（如果尚未配置）
   在项目中引入Firestore模块，确保已完成Firebase初始化配置。

2. 注册用户后写入额外信息到Firestore
   用户通过createUserWithEmailAndPassword注册成功后，获取用户的唯一ID（user.uid），将额外信息以用户ID为文档ID存入Firestore的集合中（比如命名为users）。

3. 后续读取额外信息
   当需要获取用户的完整信息时，通过当前Auth用户的uid从Firestore中查询对应的文档即可。

修改后的代码示例 #

import firebaseConfig from "../firebaseConfig";
import { getAuth, createUserWithEmailAndPassword, updateProfile, onAuthStateChanged } from "firebase/auth";
// 新增Firestore相关导入
import { getFirestore, doc, setDoc } from "firebase/firestore";
import { useNavigate } from "react-router-dom";
import { useState } from "react";

const Singup = () => {
  const auth = getAuth();
  const db = getFirestore(); // 初始化Firestore实例
  const navigate = useNavigate();
  const [name, setName] = useState("");
  const [secondName, setSecondName] = useState("");
  const [phone, setPhone] = useState("");
  const [address, setAddress] = useState(""); // 变量名改为address更贴合语义
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [err, setErr] = useState("");

  const handleSubmit = () => {
    if (!name || !secondName || !phone || !address || !email || !password) {
      setErr("请填写所有必填项！");
      return;
    }
    if (password.length < 6) {
      setErr("密码长度至少需要6位！");
      return;
    }

    createUserWithEmailAndPassword(auth, email, password)
      .then(async (userCredential) => {
        const user = userCredential.user;
        // 更新Auth用户的displayName（可选，存储用户全名）
        await updateProfile(user, {
          displayName: `${name} ${secondName}`
        });
        // 将额外信息写入Firestore
        await setDoc(doc(db, "users", user.uid), {
          firstName: name,
          lastName: secondName,
          phoneNumber: phone,
          address: address,
          email: email
        });
        setErr("");
        navigate("/");
      })
      .catch((error) => {
        console.log(error.code);
        if (error.code === "auth/email-already-in-use") {
          setErr("该邮箱已被注册！");
        } else {
          setErr("注册失败，请稍后重试");
        }
      });
  };

  onAuthStateChanged(auth, (user) => {
    if (user) {
      navigate("/");
    }
  });

  return (
    <div>
      <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="名字" />
      <input type="text" value={secondName} onChange={(e) => setSecondName(e.target.value)} placeholder="姓氏" />
      <input type="tel" value={phone} onChange={(e) => setPhone(e.target.value)} placeholder="电话号码" />
      <input type="text" value={address} onChange={(e) => setAddress(e.target.value)} placeholder="地址" />
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="邮箱" />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="密码" />
      {err && <p style={{color: 'red'}}>{err}</p>}
      <button onClick={handleSubmit}>注册</button>
    </div>
  );
};

export default Singup;

关键说明 #

• updateProfile只能更新Auth用户对象的预设字段，自定义字段会被忽略，这就是你之前尝试失败的原因。
• 用Firestore存储额外信息时，建议以用户的uid作为文档ID，这样可以快速关联Auth用户和其扩展信息。
• 后续需要读取用户的完整信息时，只需通过doc(db, "users", currentUser.uid)查询对应的文档即可。

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