Expo+React Native+TypeScript集成Firebase时出现‘Component auth has not been registered yet’错误求助

各位好，我最近在搭建一个基于Expo、React Native和TypeScript的小型应用，后端用Firebase做身份验证和数据存储，但在运行时碰到了「Component auth has not been registered yet」的错误，试了好几种方案都没搞定，来这里请教大家！

我的项目背景与初始化步骤 #

我是用以下命令初始化的项目：

npx create-expo-app appName --template expo-template-blank-typescript

运行项目的命令是：

npx expo start --clear

项目是在Android模拟器/实体设备上调试的，Firebase那边已经创建了项目，并且添加了Web应用和身份验证组件。

我新增/修改的代码文件 #

项目初始化后只新增/修改了3个文件，Firebase配置里的敏感信息我已经打码了：

1. App.tsx #

// App.tsx
import LoginScreen from "./src/screens/LoginScreen";

export default function App() {
  return <LoginScreen />;
}

2. src/services/firebase.ts #

// src/services/firebase.ts
import { initializeApp, getApps, getApp } from "@firebase/app";
import { getAuth } from "@firebase/auth";
import { getFirestore } from "@firebase/firestore";
import { getStorage } from "@firebase/storage";

const firebaseConfig = {
  apiKey: "maskedapikey",
  authDomain: "maskedauthdomain",
  projectId: "maskedprojectid",
  storageBucket: "maskedstoragebucket",
  messagingSenderId: "maskedmessagingsenderid",
  appId: "maskedappid"
};

const app = getApps().length ? getApp() : initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
const storage = getStorage(app);

export { auth, db, storage };

3. src/screens/LoginScreen.tsx #

// src/screens/LoginScreen.tsx
import React, { useState } from "react";
import { View, Text, TextInput, Button, Alert, StyleSheet } from "react-native";
import { signInWithEmailAndPassword, createUserWithEmailAndPassword } from "firebase/auth";
import { auth } from "../services/client";

const LoginScreen = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [isRegistering, setIsRegistering] = useState(false);

  const handleAuth = async () => {
    if (!email || !password) {
      Alert.alert("Error", "Please enter both email and password");
      return;
    }
    try {
      if (isRegistering) {
        await createUserWithEmailAndPassword(auth, email, password);
        Alert.alert("Success", "Account created!");
      } else {
        await signInWithEmailAndPassword(auth, email, password);
        Alert.alert("Success", "Logged in!");
      }
    } catch (error: any) {
      console.error("Firebase Auth Error:", error);
      Alert.alert("Auth Error", error.message);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Application Login</Text>
      <TextInput
        style={styles.input}
        placeholder="Email"
        keyboardType="email-address"
        autoCapitalize="none"
        value={email}
        onChangeText={setEmail}
      />
      <TextInput
        style={styles.input}
        placeholder="Password"
        secureTextEntry
        value={password}
        onChangeText={setPassword}
      />
      <Button title={isRegistering ? "Register" : "Login"} onPress={handleAuth} />
      <Text style={styles.toggle} onPress={() => setIsRegistering(!isRegistering)}>
        {isRegistering ? "Already have an account? Login" : "No account? Register here"}
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    padding: 20,
    flex: 1,
    justifyContent: "center"
  },
  title: {
    fontSize: 24,
    fontWeight: "bold",
    marginBottom: 20,
    textAlign: "center"
  },
  input: {
    borderWidth: 1,
    borderColor: "#ccc",
    padding: 10,
    borderRadius: 5,
    marginBottom: 15
  },
  toggle: {
    textAlign: "center",
    marginTop: 10,
    color: "blue"
  }
});

export default LoginScreen;

遇到的错误 #

在Android模拟器/设备上运行项目后，触发登录/注册操作时，会弹出「Component auth has not been registered yet」的错误提示，控制台也会输出对应的错误信息。

我已经尝试过的解决方案（均未生效） #

• 方案1：清理依赖重新安装：删除了node_modules和package-lock.json，然后重新运行npm install，问题依旧。
• 方案2：检查依赖冲突：查看了项目依赖，确认没有重复安装@firebase/app的情况，项目依赖列表如下：

application@1.0.0 /Volumes/T7/Learning/React/Application
├── @babel/core@7.27.1
├── @types/react@19.0.14
├── expo-status-bar@2.2.3
├── expo@53.0.9
├── firebase@11.7.1
├── react-native@0.79.2
├── react@19.0.0
└── typescript@5.8.3

• 方案3：修改导入方式为直接模块导入：尝试把Firebase相关的导入改成直接引用子模块的方式，比如import { getAuth } from "@firebase/auth";，但还是没解决问题。
• 方案4：检查Firebase版本一致性：查看了firebase包的依赖树，确认@firebase/app、@firebase/auth等子包的版本是一致的，没有版本不匹配的情况。

实在没辙了，有没有大佬碰到过类似的问题？麻烦给点思路，谢谢大家！

内容来源于stack exchange