Firebase-React项目中sendPasswordResetEmail()函数调用异常问题

我正在开发一个集成Firebase的React项目，调用Firebase Authentication的sendPasswordResetEmail()函数时触发错误，错误信息如下：

services_firebaseConfig_config__WEBPACK_IMPORTED_MODULE_1_.auth.sendPasswordResetEmail is not a function

项目中Firebase SDK的其他功能（认证、存储、Firestore）均能正常运行，且已确认Firebase配置无误，不确定该问题源于导入/初始化方式还是SDK本身，需排查原因。

相关代码示例 #

ForgotPasswordDialog 组件 #

import React, { useState } from "react";
import { Dialog, TextField, Button } from "@mui/material";
import { auth } from "../../services/firebaseConfig/config";

const ForgotPasswordDialog = ({ open, onClose }) => {
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");

  const handlePasswordReset = async () => {
    try {
      await auth.sendPasswordResetEmail(email);
      setMessage("Email send to " + email + " please check your inbox");
    } catch (error) {
      setMessage("Error: " + error.message);
    }
  };

  return (
    <Dialog open={open} onClose={onClose}>
      <div>
        <h2>Forgotten password</h2>
        {message && <p>{message}</p>}
        <TextField
          label="Email"
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <Button onClick={handlePasswordReset}>Password reset</Button>
      </div>
    </Dialog>
  );
};

export default ForgotPasswordDialog;

Firebase 配置文件 #

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getStorage } from "firebase/storage";

// 配置信息存储在独立的.env文件中
const firebaseConfig = {
  apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTHDOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASEURL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECTID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGEBUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGINGSENDERID,
  appId: process.env.REACT_APP_FIREBASE_APPID,
};

const app = initializeApp(firebaseConfig);

export const auth = getAuth(app);
export const fire_store = getFirestore(app);
export const storage = getStorage(app);

项目环境详情 #

• React版本：18.2.0
• Firebase SDK版本：^10.7.1

问题原因与解决方法 #

问题核心在于Firebase v9+的模块化API使用规则：sendPasswordResetEmail不是Auth实例的方法，而是需要单独导入的顶层函数，正确用法如下：

1. 在组件中新增函数导入：

import { sendPasswordResetEmail } from "firebase/auth";

2. 修改密码重置函数的调用逻辑：

const handlePasswordReset = async () => {
  try {
    await sendPasswordResetEmail(auth, email); // 第一个参数为Auth实例，第二个参数为目标邮箱
    setMessage("邮件已发送至 " + email + "，请查收收件箱");
  } catch (error) {
    setMessage("错误：" + error.message);
  }
};

Firebase从v9版本开始采用模块化架构，目的是优化打包体积，仅引入所需功能。大部分操作函数需单独导入，不再挂载在Auth/Firestore等实例上。你的其他功能正常，是因为它们的调用方式符合模块化要求，而该函数误用了旧版命名空间的调用逻辑。

内容的提问来源于stack exchange，提问作者M.Lac