使用Firebase Auth出现TypeError: Cannot read properties of undefined (reading 'User')的原因

使用Expo搭配Firebase ^10.12.2搭建用户认证功能时，移除认证状态监听的useEffect代码程序可正常运行，添加后出现TypeError: Cannot read properties of undefined (reading 'User')错误，以下是错误原因及修复方案：

错误原因拆解 #

• Firebase模块化API导致类型引用失效：Firebase v9及以后采用模块化架构，import firebase from 'firebase/app'这种默认导入方式已不再生效，你导入的firebase对象实际是undefined，因此访问firebase.User会触发类型读取错误。
• postLogin组件未返回JSX：定义的postLogin函数组件缺少return语句，无法渲染内部导航栈结构，会引发后续渲染异常。
• 导航组件引用错误：在Stack.Screen中直接传入了InsideStack（导航器构造函数），而非定义好的postLogin组件，导致导航逻辑无法正确执行。

修复方案 #

1. 修正Firebase类型导入 #

替换原有的默认导入，改用模块化方式导入User类型：

// 删除 import firebase from 'firebase/app';
import { User } from 'firebase/auth';

同时更新useState的类型定义：

const [user, setUser] = useState<User | null>(null);

2. 修复postLogin组件的返回值 #

为postLogin组件添加return语句，确保返回JSX结构：

function postLogin() {
  return (
    <InsideStack.Navigator>
        <InsideStack.Screen name="Home" component={HomeScreen} />
        <InsideStack.Screen name="Task" component={TaskScreen} />
        <InsideStack.Screen name="CompleteTask" component={CompleteTaskScreen} />
    </InsideStack.Navigator>
  );
}

3. 修正导航组件引用 #

将Stack.Screen的component属性改为postLogin：

{user ? (
  <Stack.Screen name="Inside" component={postLogin} options={{headerShown: false}} />
) : (
  <Stack.Screen name="Login" component={LoginScreen} />
)}

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