React Native返回前页面传参报错：TypeError: undefined is not an object

我有两个页面，尝试在它们之间传递参数，其中HomeScreen是前序页面。相关代码如下：

HomeScreen组件代码 #

function HomeScreen(props: {
  //some props
  route:any, 
  navigation:any,
}) {
   React.useEffect(() => {
     if (props.route.params?.defined) {
       console.log(props.route.params?.defined);
     }
   }, ); //rest of the code
}

SavedRoutesScreen组件代码 #

function SavedRoutesScreen(props: { navigation: any }) {
  function handleGo() {
   props.navigation.navigate({
     name: "Home",
     params: { defined: true },
   });
  } //rest of the code
}

尝试从SavedRoutesScreen向HomeScreen传递参数时，出现错误：
TypeError: undefined is not an object (evaluating 'props.route.params')

错误原因 #

• HomeScreen未通过导航器正确接收route props：如果HomeScreen不是由React Navigation导航器渲染（比如直接用<HomeScreen />调用），route和navigation props会是undefined，访问props.route.params时直接报错。
• 可选链覆盖不完整：代码中仅对params使用了可选链，但如果props.route本身是undefined，props.route.params依然会触发错误——可选链只作用于.之后的层级。
• 未监听参数变化：从SavedRoutesScreen返回HomeScreen时，HomeScreen不会重新挂载，仅route.params更新，但useEffect依赖项为空数组，不会重新执行逻辑，同时若其他未做可选链处理的地方访问params，也会报错。

解决方案 #

1. 确保HomeScreen通过导航器注册并渲染：检查导航配置，将HomeScreen加入Stack.Navigator或对应导航器中，始终通过navigation.navigate方法跳转，避免直接渲染组件。
2. 完善可选链处理：修改判断逻辑，给route也加上可选链，确保层级安全：

   if (props.route?.params?.defined) {
     console.log(props.route.params.defined);
   }
   

3. 监听参数变化：在useEffect的依赖数组中加入props.route.params，确保参数更新时重新执行逻辑：

   React.useEffect(() => {
     if (props.route?.params?.defined) {
       console.log(props.route.params.defined);
     }
   }, [props.route?.params]);
   

4. 使用useRoute钩子（推荐）：用React Navigation提供的useRoute钩子替代props接收route对象，更可靠且无需手动声明props：

   import { useRoute } from '@react-navigation/native';
   
   function HomeScreen() {
     const route = useRoute();
     React.useEffect(() => {
       if (route.params?.defined) {
         console.log(route.params.defined);
       }
     }, [route.params]);
   }
   

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