Firebase auth/network-request-failed错误求助（邮箱注册场景）

跟着YouTube教程开发React Native应用时，点击注册按钮触发FirebaseError: Firebase: Error (auth/network-request-failed)错误，无法完成注册（登录失败是因为还未注册成功）。查找的YouTube解决方案均针对Google登录功能，但我并未使用该功能，作为Firebase新手，希望得到帮助。

相关代码如下：

import React from 'react'
import { StatusBar } from 'expo-status-bar';
import { Alert, StyleSheet, View } from 'react-native';

import { getAuth, createUserWithEmailAndPassword, isSignInWithEmailLink, signInWithEmailAndPassword } from 'firebase/auth'
import {initializeApp} from 'firebase/app'
import { firebaseConfig } from './src/config/firebase';
import { Input, Button, Div, Text } from 'react-native-magnus';

import { NavigationContainer, useNavigation } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

function HomeScreen(){
  return(
    <Div flex={1} justifyContent='center' alignSelf='center'>
      <Text>Hallo</Text>
    </Div>
  )
}

function LoginScreen(){

  const [email, setEmail] = React.useState('')
  const [password, setPassword] = React.useState('')

  const app = initializeApp(firebaseConfig)
  const auth = getAuth(app)
  
  const nav = useNavigation()

  const handleCreateAccount = () => {
    createUserWithEmailAndPassword(auth, email,password)
    .then((userCredential) => {
      console.log("Account Created")
      const user = userCredential.user
      console.log(user)
    })
    .catch((err) => {
      console.log(err)
      alert(err.message)
    })
  }

  const handleSignIn = () => {
    signInWithEmailAndPassword(auth, email, password)
    .then((userCredential) => {
      console.log("Signed In!") 
      const user = userCredential.user
      console.log(user)
      nav.navigate("Home")
    })
    .catch((err) => {
      console.log(err)
    })
  }

  return(
    <View style={styles.container}>
      <Div w={300}>
        <Input value={email} onChange={(val:any) => setEmail(val) } placeholder='Email..'  />
        <Input value={password} onChange={(val:any) => setPassword(val)} placeholder='Password..' mt={10} />
      </Div>
      <Div justifyContent='center'>
        <Button onPress={handleSignIn} w={100} mt={10}>
          Sign-In
        </Button>
        <Button onPress={handleCreateAccount} w={100} mt={10}>
          Register
        </Button>
      </Div>
      <StatusBar style="auto" />
    </View>
  )
}


const Stack = createNativeStackNavigator()
export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Login" component={LoginScreen} options={{headerShown: false}} />
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

针对auth/network-request-failed错误，以下是几个非Google登录场景下的排查和修复步骤：

• 修正Firebase初始化逻辑
  当前在LoginScreen组件内重复执行Firebase App初始化，每次组件渲染都会调用initializeApp，可能导致异常。需将初始化移到组件外部，全局仅执行一次：

  // 移至文件最顶部，LoginScreen组件外
  const app = initializeApp(firebaseConfig)
  const auth = getAuth(app)
  
  function LoginScreen(){
    // 移除组件内的app和auth初始化代码
    const [email, setEmail] = React.useState('')
    const [password, setPassword] = React.useState('')
    
    const nav = useNavigation()
    // ... 其余代码保持不变
  }
  

• 检查网络连接
  确认设备/模拟器网络正常，可尝试访问Firebase官网测试连通性；iOS模拟器检查网络权限，Android模拟器可重启或重置网络设置。

• 验证Firebase配置与登录方式
  登录Firebase控制台，确保firebaseConfig中的apiKey、authDomain等参数完全正确；同时确认项目已启用电子邮件/密码登录方式（控制台→Authentication→登录方法→启用对应选项）。

• 确认应用网络权限
  对于Expo项目，检查app.json中是否配置了必要的网络权限：

  {
    "expo": {
      "ios": {
        "infoPlist": {
          "NSAppTransportSecurity": {
            "allowsArbitraryLoads": true // 开发环境可开启，生产建议配置具体域名
          }
        }
      },
      "android": {
        "permissions": ["INTERNET"]
      }
    }
  }
  

• 清除缓存并重启项目
  执行expo r -c（Expo项目）或npx react-native start --reset-cache（裸项目）清除缓存后重启服务，同时重启模拟器/真机并重新安装应用。

• 排查防火墙与代理
  若开发环境使用代理或防火墙，可能阻止Firebase请求，尝试关闭代理或添加Firebase域名到白名单。

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