TypeScript+Expo项目使用React Navigation配置Stack时出现报错

开发者阿泽

2026-10-2

解决方案

补充Stack导航的路由类型声明
React Navigation v6及以上版本在TypeScript环境下使用时，需要显式声明所有路由的参数类型，再传入createStackNavigator作为泛型参数，否则会触发类型不匹配报错。示例代码如下：

// loginStack.tsx 中新增类型定义
type RootStackParamList = {
  Home: undefined; // 对应页面无入参则设为undefined
  // 把你所有注册在screens下的页面路由依次添加，例如：
  Login: undefined;
  Profile: { userId: string }; // 有入参的页面在此声明参数结构
};

// 创建Stack实例时传入泛型
const Stack = createStackNavigator<RootStackParamList>();

校验依赖版本一致性
执行以下命令检查导航相关依赖的版本是否匹配：
```
npm list @react-navigation/native @react-navigation/stack
```
若两个依赖的大版本不一致（比如一个是v5一个是v6），执行以下命令统一升级到最新稳定版：
```
npm install @react-navigation/native@latest @react-navigation/stack@latest
```
重启TypeScript服务
若依赖和代码均无问题，可重启IDE的TypeScript服务重新加载类型：VSCode按下Ctrl+Shift+P，输入Restart TypeScript Server回车即可。