React Native报错：undefined is not an object (evaluating 'route.params')求解决

针对你遇到的undefined is not an object (evaluating 'route.params')错误，这里有几个排查和解决的方向：

1. 确认导航栈的屏幕名称匹配 #

你在Screen1中用navigation.navigate("Screen2", ...)跳转，但Screen2的组件名是BookDetailScreen，要确保导航器配置里这个屏幕的name字段确实是"Screen2"，比如：

// 导航栈配置示例（以StackNavigator为例）
<Stack.Navigator>
  <Stack.Screen name="Screen1" component={Screen1} />
  <Stack.Screen name="Screen2" component={BookDetailScreen} /> {/* 此处name必须与跳转时的名称一致 */}
</Stack.Navigator>

如果导航配置里写的是name="BookDetail"，那跳转时应该用navigation.navigate("BookDetail", ...)，名称不匹配会直接导致参数无法传递。

2. 给解构操作加容错处理 #

即使参数正常传递，也可能存在直接打开Screen2的场景导致route.params为undefined，给解构加默认值可以避免报错：

function BookDetailScreen({ route, navigation }) {
  // 使用可选链+空值合并运算符做容错
  const { title, author, genre } = route.params ?? {};
  // 兼容旧版本的写法
  // const params = route.params || {};
  // const { title, author, genre } = params;
}

3. 检查Screen1的onPress代码完整性 #

你提供的Screen1代码里，onPress的箭头函数看起来没有完整闭合，这会导致点击事件无法正常触发，参数自然传不过去。完整的写法应该是：

// 正确的示例（以Button组件为例）
<Button
  onPress={() =>
    navigation.navigate("Screen2", {
      title: "Beispiel Titel",
      author: "Beispiel Author",
      genre: "Beispiel Genre",
    })
  }
  title="跳转到详情页"
/>

4. 使用useRoute钩子获取路由信息 #

如果通过props解构route始终拿不到值，可以尝试用React Navigation提供的useRoute钩子直接获取路由对象：

import { useRoute } from '@react-navigation/native';

function BookDetailScreen({ navigation }) {
  const route = useRoute();
  const { title, author, genre } = route.params ?? {};
}

这种方式能确保你拿到当前屏幕的路由信息，避免props传递异常的问题。

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