如何获取Firebase新用户UID并填充数据库？Key为空问题排查

问题现象 #

使用Firebase Authentication成功创建账户后，尝试将用户详情保存到Firebase Database时，系统提示Key为空，但通过console.log能正常输出UID。

代码问题分析 #

1. 状态更新异步延迟：setUserID是React异步状态更新方法，第二个then回调执行时，userID还未更新为新UID，导致拼接的路径users/+userID变成空Key。
2. 未正确引用表单值：保存数据时直接使用email、first_name等未定义变量，需从Formik的values对象中取值。
3. 冗余状态使用：无需额外维护userID状态，直接从createUserWithEmailAndPassword返回的userCredential.user.uid获取UID更可靠。

修正后的代码 #

import React from "react";
import { useFormik } from "formik";
import { emailRegex } from "../components/Utilities/validations";
import { createUserWithEmailAndPassword } from "firebase/auth";
import { auth } from "../components/firebase";
import { ref, set } from "firebase/database";
import { database } from "../components/firebase";

export default function () {
  const validate = (values) => {
    const errors = {};
    if (values.repassword !== values.password) {
      errors.repassword = "密码不匹配";
    }

    if (!emailRegex.test(values.email)) {
      errors.email = "邮箱格式无效";
    }
    if (values.phone.length < 10) {
      errors.phone = "请输入包含区号的有效电话号码";
    }
    return errors;
  };

  const formik = useFormik({
    initialValues: {
      email: "",
      password: "",
      repassword: "",
      first_name: "",
      last_name: "",
      phone: "",
      street_address: "",
      street_address_2: "",
      city: "",
      state: "",
      postal_code: "",
      country: "",
    },
    validate,
    onSubmit: (values) => {
      createUserWithEmailAndPassword(auth, values.email, values.password)
        .then((userCredential) => {
          const uid = userCredential.user.uid;
          console.log("用户UID:", uid);
          
          return set(ref(database, `users/${uid}`), {
            email: values.email,
            first_name: values.first_name,
            last_name: values.last_name,
            phone: values.phone,
            street_address: values.street_address,
            street_address_2: values.street_address_2,
            city: values.city,
            state: values.state,
            postal_code: values.postal_code,
            country: values.country,
            userID: uid
          });
        })
        .catch((error) => {
          console.log("错误信息:", error.message);
        });
    },
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <input
        type="email"
        name="email"
        onChange={formik.handleChange}
        value={formik.values.email}
      />
      {formik.errors.email && <div>{formik.errors.email}</div>}
      
      {/* 补充其他表单字段，如密码、姓名等 */}
      <button type="submit">注册</button>
    </form>
  );
}

关键修改说明 #

• 移除冗余的userID状态，直接从userCredential获取UID，避免异步更新延迟问题。
• 将数据库写入操作放在同一个then回调中，确保UID即时可用。
• 修正validate函数的逻辑错误，确保返回校验错误对象给Formik。
• 保存数据时从values对象取表单值，避免未定义变量错误。
• 补充基础表单渲染代码，确保组件可正常运行。

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