React Hook调用无效报错求助：已排除版本及多副本问题

报错信息 #

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

已排查确认React与渲染器版本匹配，且项目中不存在多份React副本。

相关代码 #

import messaging from '@react-native-firebase/messaging'

const Stack = createStackNavigator()

if (!firebase.apps.length) {
  firebase.initializeApp(FIREBASE_CONFIG)
}

export default function App() {
  // Request Push Notification permission from device.
const requestPermission = async () => {
  const authStatus = await messaging().requestPermission();
  const enabled =
    authStatus === messaging.AuthorizationStatus.AUTHORIZED || authStatus === messaging.AuthorizationStatus.PROVISIONAL;

  if (enabled) {
    console.log('Authorization status:', authStatus);
  }
};

useEffect(() => {
  requestPermission();
}, []);

  return ( 
...
...
...

自认为Hook使用符合规范，不确定还需排查哪些内容，寻求帮助。

排查方向建议 #

• 检查useEffect导入：代码中未看到import { useEffect } from 'react'，若未导入就调用useEffect，React会无法识别这是合法Hook调用，直接触发该报错，这是最易忽略的点。
• 确认组件渲染方式：确保App是作为React组件被渲染，而非像普通函数那样直接调用（比如在类组件、普通函数内部调用App()），这种场景会导致内部Hook触发违规调用。
• 调整Firebase初始化位置：当前初始化代码放在组件外部，可尝试移到App组件的useEffect中（依赖设为[]确保只执行一次），避免第三方库初始化的副作用干扰React运行环境：

  export default function App() {
    useEffect(() => {
      if (!firebase.apps.length) {
        firebase.initializeApp(FIREBASE_CONFIG);
      }
      requestPermission();
    }, []);
  
    // ...其他代码
  }
  

• 核查第三方库兼容性：确认@react-native-firebase/messaging版本与当前React Native版本兼容，部分旧版本RN Firebase库可能与新版React的Hook机制存在冲突，可尝试升级或降级至官方推荐的兼容版本。
• 启用ESLint Hook规则：若项目未配置eslint-plugin-react-hooks，建议添加该插件，它能在开发阶段自动检测Hook的违规使用，快速定位问题。

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