React Native 0.66搭配React Navigation4.4.4报navigation.state.params.name未定义错误

报错根因 #

你遇到的undefined is not an object (evaluating 'navigation.state.params.name')报错，核心原因是navigation.state.params本身为undefined，直接读取其下的name属性触发异常。触发该场景的常见情况有两种：

• 对应路由为初始启动路由，未主动配置默认params
• 跳转进入该路由时未传递params参数

修复方案 #

方案1：给params添加兜底默认值 #

• 可选链+空值合并运算符写法（兼容性允许时推荐）：

const name = navigation.state.params?.name ?? '你的默认值'

• 低版本兼容写法：

const name = (navigation.state.params || {}).name || '你的默认值'

• 解构赋值写法：

const { name = '你的默认值' } = navigation.state.params || {}

方案2：初始路由预置params #

如果报错出现在初始启动的路由页，可在路由配置的initialRouteParams字段中提前配置默认参数：

import { createStackNavigator, createAppContainer } from 'react-navigation';
import HomeScreen from './HomeScreen';

const AppNavigator = createStackNavigator({
  Home: HomeScreen
}, {
  initialRouteName: 'Home',
  // 配置初始路由的默认参数
  initialRouteParams: {
    name: '默认名称'
  }
});

export default createAppContainer(AppNavigator);

方案3：校验跳转传参逻辑 #

如果是从其他路由跳转进入该页面时报错，检查跳转时的传参格式是否正确：

// 正确写法：参数放在navigate的第二个参数位置
navigation.navigate('目标路由名称', { name: '需要传递的名称' })

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