React Native中TouchableOpacity调用时出现undefined is not a function错误的解决

在React Native应用的LoginScreen组件中，使用TouchableOpacity的onPress事件调用自定义的handleSignUp方法时，出现"undefined is not a function"错误，导致应用无法加载。以下是相关代码：

Firebase配置代码 #

import {initializeApp} from 'firebase/app';
import {getFirestore} from 'firebase/firestore';
import {getAuth} from 'firebase/auth';

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "****",
  authDomain: "eshopmobile-fb508.firebaseapp.com",
  projectId: "eshopmobile-fb508",
  storageBucket: "eshopmobile-fb508.appspot.com",
  messagingSenderId: "734223583165",
  appId: "1:734223583165:web:6849ecf86323894686b4d4"
};

// initialize firebase
const app = initializeApp(firebaseConfig);

export const db = getFirestore(app);
export const auth = getAuth();  

LoginScreen代码 #

import React, { useState } from 'react'
import { Touchable, TouchableOpacity } from 'react-native'
import { KeyboardAvoidingView, StyleSheet, Text, TextInput, View } from 'react-native'
import { auth } from '../firebase'
import { getAuth, createUserWithEmailAndPassword } from 'firebase/auth'

const LoginScreen = () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')

  // creating authentication with password and login using firebase.
 const handleSignUp = () => {
    auth.createUserWithEmailAndPassword(email, password).then(userCredential=>{
      const user = userCredential.user;
      console.log(user.email);
    }).catch(error=>alert(error.message))
 }

  return (
      <KeyboardAvoidingView
        style={styles.container}
        behavior="padding"> 
        <View style={styles.inputContainer}>
          <TextInput
            placeholder="Email"
            value={email}
            onChangeText={text=>setEmail(text)}
            style={styles.input}
          />

        <TextInput
          placeholder="Password"
          value={password}
          onChangeText={text=>setPassword(text)}
          style={styles.input}
          secureTextEntry
        />

        </View> 
        <View style={styles.buttonContainer}>
        <TouchableOpacity
          onPress={()=> {}}
          style={styles.button}
          > 
          <Text style={styles.buttonText}>Login</Text>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={handleSignUp} 
          style={[styles.button, styles.buttonOutline]}
        > 
        <Text style={styles.buttonOutlineText}>Register</Text>
        </TouchableOpacity>
        </View>
      </KeyboardAvoidingView>
    
  )
}

export default LoginScreen

const styles = StyleSheet.create({
  container:{
    flex:1,
    justifyContent:'center',
    alignItems:'center',

  },
  
inputContainer:{
  width:'80%'
},

input:{
  backgroundColor:'white',
  paddingHorizontal:15,
  paddingVertical:10,
  borderRadius:10,
  marginTop:5
},
buttonContainer:{
  width:'60%',
  justifyContent:'center',
  alignItems:'center',
  marginTop:40
},
button:{
  backgroundColor:'#0782F9',
  width:'100%',
  padding:15,
  borderRadius:10,
  alignItems:'center'
},
buttonOutline:{
  backgroundColor:'white',
  marginTop:5,
  borderColor:'#0782F9',
  borderWidth:2
},
buttonOutlineText:{
  color:'#0782F9',
  fontWeight:'700',
  fontSize:16
},
buttonText:{
  color:'white',
  fontWeight:'700',
  fontSize:16
}
  
})

问题原因及修复方案 #

Firebase v9+采用模块化架构，createUserWithEmailAndPassword是独立的顶层函数，而非auth实例的方法。原代码中错误地以auth.createUserWithEmailAndPassword()方式调用，导致出现"undefined is not a function"错误。

修复步骤：

1. 修改handleSignUp方法的调用方式，将auth实例作为第一个参数传入独立的createUserWithEmailAndPassword函数：

const handleSignUp = () => {
  createUserWithEmailAndPassword(auth, email, password)
    .then(userCredential=>{
      const user = userCredential.user;
      console.log(user.email);
    })
    .catch(error=>alert(error.message))
}

2. 删除LoginScreen中重复导入的getAuth语句，因为已经从../firebase中导入了auth实例，无需重复引入。

后续类似问题排查思路 #

• 检查函数/方法的调用方式是否匹配当前使用的库版本（例如Firebase v8与v9的API差异）；
• 确认变量、函数是否正确定义、导出和导入，避免作用域问题；
• 使用console.log打印相关变量或函数，排查是否存在undefined的情况；
• 检查事件绑定是否正确，确保函数被正确传递（避免误传函数执行结果而非函数本身）。

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