注册时创建Firebase/Firestore集合报错：firebase未定义

我想实现用户注册时在Firebase/Firestore中为其创建专属集合，流程需要完成身份验证、创建数据库记录并跳转至首页。我已经在createDatabaseOnSignUp函数里写了部分逻辑，但现在遇到"firebase is not defined"错误。作为自学开发者，我可能遗漏了基础内容，希望有人指点正确的导入方式或解决方向。我的代码如下：

import React, { useRef } from "react";
import { useAuth } from "../../context/AuthContext";
import "./SignUp.scss";
import { Link } from "react-router-dom";
import { collection, getDocs, doc, setDoc, getDoc } from "firebase/firestore";
import { db } from "../../firebase-config";

function SignUp() {
  const { signUp, currentUser } = useAuth();
  const emailRef = useRef();
  const passwordRef = useRef();

  // console.log(currentUser.email);

  const createDatabaseOnSignUp = (emailRef, passwordRef, name) => {
    // create firebase database for user
    const user = firebase
      .auth()
      .signUp(emailRef, passwordRef)
      .then((cred) => {
        return;
        db.collection("name").doc(
          cred.user.uid.set({
            emailRef,
            name,
          })
        );
      });
    return { user };
    // sign up with userAuth
    //navigate to homepage

    // console log success
    console.log("Thanks for registering! Make your first label!");
  };

  return (
    <div className="signup">
      <div></div>
      <h1 className="signup__title">Please Sign Up...</h1>
      <div className="signup__section">
        <label className="signup__label">Email</label>
        <input className="signup__input" ref={emailRef} type="email"></input>
      </div>
      <div className="signup__section">
        <label className="signup__label">Password</label>
        <input
          className="signup__input"
          ref={passwordRef}
          type="password"
        ></input>
      </div>
      <div className="signup__section">
        <label className="signup__label">Confirm Password</label>
        <input className="signup__input" type="password"></input>
      </div>
      <button
        className="signup__button"
        onClick={() =>
          signUp(emailRef.current.value, passwordRef.current.value)
        }
      >
        Sign Up
      </button>
      <h3 className="signup__text">
        Already have an account?{" "}
        <Link to="/login" className="signup__underline">
          Log in
        </Link>
      </h3>
    </div>
  );
}

export default SignUp;

解决步骤 #

1. 修复"firebase is not defined"错误

你使用的是Firebase模块化SDK（v9+），不需要全局firebase对象。而且你已经通过useAuth上下文获取了signUp方法，直接用这个方法即可，无需再调用firebase.auth().signUp。

2. 整合注册与创建用户数据逻辑

你的createDatabaseOnSignUp函数没有被触发，且内部存在逻辑错误（比如return语句在创建文档前，导致后续代码无法执行）。需要把注册和创建Firestore记录的逻辑整合到一个方法里：

• 首先导入路由跳转工具：

  import { useNavigate } from "react-router-dom";
  

• 在组件内初始化跳转方法：

  const navigate = useNavigate();
  

• 添加确认密码的ref（当前代码有输入框但未绑定ref）：

  const confirmPasswordRef = useRef();
  

• 编写完整的注册处理函数：

  const handleSignUp = async () => {
    // 验证密码一致性
    const password = passwordRef.current.value;
    const confirmPassword = confirmPasswordRef.current.value;
    if (password !== confirmPassword) {
      alert("密码与确认密码不匹配");
      return;
    }
  
    try {
      // 调用上下文的signUp完成身份验证
      const userCredential = await signUp(emailRef.current.value, password);
      const user = userCredential.user;
  
      // 创建用户专属文档（如果需要创建专属集合，可参考后续示例）
      await setDoc(doc(db, "users", user.uid), {
        email: user.email,
        // 若需要用户名，可添加对应字段（需先添加name输入框并绑定ref）
        // name: nameRef.current.value
      });
  
      console.log("注册成功！欢迎创建你的第一个标签！");
      // 跳转至首页
      navigate("/");
    } catch (error) {
      console.error("注册失败：", error.message);
    }
  };
  

• 更新按钮的点击事件：

  <button
    className="signup__button"
    onClick={handleSignUp}
  >
    Sign Up
  </button>
  

3. 创建用户专属集合（可选）

如果要为用户创建专属集合（比如存放用户的标签），可以在注册成功后创建子集合：

// 示例：创建用户专属的labels集合，并添加初始数据
await setDoc(doc(db, `users/${user.uid}/labels`, "initial-label"), {
  name: "我的第一个标签",
  createdAt: new Date()
});

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