React Native调用Firebase Auth的signInWithEmailAndPassword报'undefined is not a function'错误

问题根源在于你使用的是Firebase v9+模块化SDK，却沿用了旧版命名空间式的方法调用方式。在模块化架构中，signInWithEmailAndPassword不再是auth实例的方法，而是需要单独导入的独立函数。

修复步骤： #

1. 在SignIn.js中导入对应的登录函数
   在文件顶部的firebase/auth导入中，添加signInWithEmailAndPassword：

   import { auth } from "../firebase/firebase";
   import { signInWithEmailAndPassword } from "firebase/auth"; // 新增这行
   

2. 修改登录方法的调用方式
   将原来的auth.signInWithEmailAndPassword(email, password)替换为独立函数调用，把auth实例作为第一个参数传入：

   // 替换原来的auth.signInWithEmailAndPassword调用
   signInWithEmailAndPassword(auth, email, password)
     .then(() => {
       // 登录成功后的逻辑
     })
     .catch((err) => {
       setErrorMessage(err.message);
       setDisplayFormErr(true);
     });
   

完整修改后的SignIn.js关键部分示例： #

import React, { useState } from "react";
import BackIcon from "react-native-vector-icons/Feather";
import FormError from "../components/FormError";
import { auth } from "../firebase/firebase";
import { signInWithEmailAndPassword } from "firebase/auth"; // 新增导入
import {
  StyleSheet,
  Text,
  View,
  Image,
  TouchableOpacity,
  TextInput,
} from "react-native";

const SignIn = ({ navigation }) => {
  // ... 原有状态定义和导航逻辑不变

  const validateInput = () => {
    let formInputs = [email, password];
    if (formInputs.includes("") || formInputs.includes(undefined)) {
      setDisplayFormErr(true);
      setErrorMessage("Please fill in all fields");
      return;
    }

    // 修改后的登录调用
    signInWithEmailAndPassword(auth, email, password)
      .then(() => {
        // 这里可以添加登录成功后的跳转或状态更新逻辑
      })
      .catch((err) => {
        setErrorMessage(err.message);
        setDisplayFormErr(true);
      });
  };

  // ... 组件剩余部分
};

补充说明： #

Firebase v9+的模块化SDK设计目的是减少打包体积，只导入需要的功能。所有Auth相关的操作方法（比如创建用户createUserWithEmailAndPassword、发送验证邮件等）都需要单独导入，并传入auth实例作为第一个参数，不再通过auth.xxx()的方式调用。

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