React Navigation嵌套导航出现route.key未定义报错如何解决？

你遇到的TypeError: undefined is not an object (evaluating 'route.key')报错核心是React Navigation相关依赖版本不兼容：

• 你当前使用的@react-navigation/native为5.x版本，但是@react-navigation/native-stack是6.x版本，两个大版本的内部路由数据结构、上下文传递逻辑不匹配，导致嵌套导航无法正确读取路由对象的key属性。
• 你的依赖中还存在无效配置项"@types/": "react-navigation/native"，会导致类型定义加载异常，也可能加剧导航相关的运行时错误。

方案一（推荐）：统一升级所有React Navigation依赖到6.x版本 #

1. 先卸载旧版本的核心导航依赖：

npm uninstall @react-navigation/native @react-navigation/bottom-tabs @react-navigation/native-stack

2. 安装6.x版本的对应依赖：

npm install @react-navigation/native@^6.x @react-navigation/bottom-tabs@^6.x @react-navigation/native-stack@^6.x

3. 升级配套依赖适配6.x版本要求：

npm install react-native-screens@^3.18.x react-native-safe-area-context@^4.5.x

4. 删除依赖中无效的"@types/": "react-navigation/native"配置，如果需要TypeScript类型支持，安装正确的类型包：

npm install @types/react-navigation__native --save-dev

方案二：保持核心库5.x版本，降级native-stack到适配版本 #

如果你不想升级大版本改动过多，直接把native-stack降到5.x即可：

npm install @react-navigation/native-stack@^5.x

确保整个应用全局只有一个NavigationContainer组件包裹，如果你当前的BottomTab组件不是项目根组件，外层已经存在NavigationContainer，需要删掉BottomTab内部的NavigationContainer，重复的导航容器会导致路由上下文混乱，也会触发同类路由属性读取错误。

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