React中auth.createUserWithEmailAndPassword不是函数的问题求助

问题出在Firebase v9+的模块化API使用方式上，你当前代码沿用了旧版本的命名空间调用模式，而新版本需要使用独立导入的函数。

修复步骤： #

1. 修正base.jsx中的auth初始化
   显式传入app实例初始化auth，避免潜在的上下文问题：

   import { initializeApp } from "firebase/app";
   import { getAuth } from "firebase/auth";
   
   const firebaseConfig = {
     // 你的Firebase配置信息
   };
   
   export const app = initializeApp(firebaseConfig);
   export const auth = getAuth(app); // 传入初始化后的app实例
   

2. 修改Register.jsx的方法调用逻辑
   从firebase/auth单独导入所需方法，以函数形式调用（第一个参数传入auth实例）：

   import React, { useState } from "react";
   import { auth } from "../components/base";
   // 新增导入注册、登录所需方法
   import { createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth";
   import { Link, useNavigate } from "react-router-dom";
   
   function Register() {
     const [email, setEmail] = useState("");
     const [password, setPassword] = useState("");
     const [error, setError] = useState(null);
     let navigate = useNavigate();
   
     const handleRegister = async (e) => {
       e.preventDefault();
       try {
         // 使用函数式调用，传入auth实例作为第一个参数
         await createUserWithEmailAndPassword(auth, email, password);
         await signInWithEmailAndPassword(auth, email, password);
         navigate("/");
       } catch (error) {
         setError(error.message);
       }
     };
   
     // 其余JSX代码保持不变
     return (
       <div className="register">
         <div className="container">
           <div className="box">
             <form onSubmit={handleRegister}>
               <h2>Register</h2>
               <div className="form-group">
                 <label htmlFor="email">Email</label>
                 <input
                   type="email"
                   className="form-control"
                   id="email"
                   placeholder="Enter email"
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
                 />
               </div>
               <div className="form-group">
                 <label htmlFor="password">Password</label>
                 <input
                   type="password"
                   className="form-control"
                   id="password"
                   placeholder="Password"
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
                 />
               </div>
               <button type="submit" className="btn btn-primary">
                 Register
               </button>
               <div>{error && <p className="error">{error}</p>}</div>
             </form>
             <p className="sign-up">
               Already have an account?
               <Link to="/login">
                 <span>Login</span>
               </Link>
             </p>
           </div>
         </div>
       </div>
     );
   }
   
   export default Register;
   

原理说明 #

Firebase v9+采用模块化架构，通过Tree Shaking减少打包体积。旧版本的auth.createUserWithEmailAndPassword这类命名空间方法已被移除，改为使用独立导出的函数，调用时必须传入auth实例作为第一个参数。

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