React Native升级Firebase SDK 8到9遇onAuthStateChanged TypeError求助

在React Native中将Firebase SDK从版本8升级到9.9.0，按官方指南进行模块化改造后，持续触发以下错误：

TypeError: util.getModularInstance(auth).onAuthStateChanged is not a function.

反常的是，仅将onAuthStateChanged改为版本8/9兼容的链式调用写法（auth.onAuthStateChanged），其余代码保留版本9的模块化导入（未使用compat包）时，程序能正常运行。

当前导入语句 #

import firebaseApp from './src/config/ConfigFirebase';
import { getAuth, onAuthStateChanged } from "firebase/auth";

触发错误的模块化调用代码 #

useEffect(() => {
    async function checkUser() {
      const auth = getAuth(firebaseApp);
      onAuthStateChanged((auth, user) => {
        if(user !== null) {
          setIsLogged(true);
          setLoaded(true);
        } else {
          setIsLogged(false);
          setLoaded(true);
        }
      })
    }
    checkUser();
  }, []);

错误堆栈信息 #

[Unhandled promise rejection: TypeError: util.getModularInstance(auth).onAuthStateChanged is not a function. (In 'util.getModularInstance(auth).onAuthStateChanged(nextOrObserver, error, completed)', 'util.getModularInstance(auth).onAuthStateChanged' is undefined)]
at node_modules\@firebase\auth\dist\rn\phone-51423d6b.js:5862:49 in tslib.__awaiter$argument_3
at App.js:105:6 in checkUser
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:294:29 in invoke
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:155:27 in invoke
at node_modules\regenerator-runtime\runtime.js:190:16 in PromiseImpl$argument_0
at node_modules\react-native\node_modules\promise\setimmediate\core.js:45:6 in tryCallTwo
at node_modules\react-native\node_modules\promise\setimmediate\core.js:200:22 in doResolve
at node_modules\react-native\node_modules\promise\setimmediate\core.js:66:11 in Promise
at node_modules\regenerator-runtime\runtime.js:189:15 in callInvokeWithMethodAndArg
at node_modules\regenerator-runtime\runtime.js:212:38 in enqueue
at node_modules\regenerator-runtime\runtime.js:239:8 in exports.async
at App.js:102:4 in checkUser
at App.js:118:13 in useEffect$argument_0
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19280:25 in invokePassiveEffectCreate
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:93:4 in invokeGuardedCallbackProd
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:318:2 in invokeGuardedCallback
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19362:29 in flushPassiveEffectsImpl
at node_modules\scheduler\cjs\scheduler.development.js:468:23 in unstable_runWithPriority
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18126:21 in performSyncWorkOnRoot
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5911:33 in runWithPriority$argument_1
at node_modules\scheduler\cjs\scheduler.development.js:468:23 in unstable_runWithPriority
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5906:23 in flushSyncCallbackQueueImpl
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5893:28 in flushSyncCallbackQueue
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17745:30 in scheduleUpdateOnFiber
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:21484:23 in updateContainer
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:22144:17 in render
at node_modules\react-native\Libraries\ReactNative\renderApplication.js:58:4 in renderApplication
at node_modules\react-native\Libraries\ReactNative\AppRegistry.js:117:25 in runnables.appKey.run
at node_modules\react-native\Libraries\ReactNative\AppRegistry.js:202:4 in runApplication
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:414:4 in __callFunction
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:113:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:365:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112:4 in callFunctionReturnFlushedQueue

可正常运行的兼容写法代码 #

useEffect(() => {
    async function checkUser() {
      const auth = getAuth(firebaseApp);
      auth.onAuthStateChanged(user => {
        if(user !== null) {
          setIsLogged(true);
          setLoaded(true);
        } else {
          setIsLogged(false);
          setLoaded(true);
        }
      })
    }
    checkUser();
  }, []);

Firebase初始化代码（ConfigFirebase.js） #

import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  ...
  ...
};

const firebaseApp = initializeApp(firebaseConfig);

export default firebaseApp;

解决思路 #

• 修正模块化API调用参数：版本9的onAuthStateChanged是独立函数，第一个参数必须传入auth实例，第二个才是回调函数，错误写法把auth放到了回调的参数里，正确写法应为：

  onAuthStateChanged(auth, (user) => {
    // 处理用户状态逻辑
  })
  

• 检查依赖版本一致性：确保所有@firebase/*相关包的版本都是9.9.0，避免混合不同版本导致API不兼容
• 清理依赖缓存并重装：执行npm ci或yarn install --force，清除可能残留的旧版本依赖文件
• 排查混用compat与模块化API：确认项目中没有同时导入compat版本的Firebase模块（如import 'firebase/auth/compat'），这类导入会干扰模块化API的正常工作

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