React Native函数式组件props.route.params.name为undefined问题

在React Native函数式组件开发中，通过navigation.navigate向DraggableList页面传递包含routes和name的参数对象后，出现以下异常：

• 打印props.route.params能看到完整的参数对象（包含routes和name）
• 直接访问props.route.params.name却返回undefined

相关代码 #

Screen 1（传参页面）

<TouchableOpacity
  onPress={() => {
    navigation.navigate('DraggableList', {
      routes: ['A', 'B', 'C'],
      name: 'ABCD',
    });
  }}
>
  {/* 按钮内容 */}
</TouchableOpacity>

Screen 2（接收参数页面）

打印完整参数：

console.log('Props==============>', props.route.params);

打印单个属性：

console.log('Props==============>', props.route.params.name);

排查与解决方法 #

• 检查拼写一致性：确认传参时的name和访问时的name拼写、大小写完全一致，避免因笔误导致属性无法读取。
• 处理初始渲染异步问题：组件首次渲染时props.route.params可能还未完成传递，可通过useEffect监听参数变化后再访问属性：

  import { useEffect } from 'react';
  
  useEffect(() => {
    if (props.route?.params) {
      console.log('Props name==============>', props.route.params.name);
    }
  }, [props.route.params]);
  

• 确认参数结构：打印参数的JSON字符串，确认是否存在嵌套结构。例如若实际参数是{ params: { routes: [...], name: 'ABCD' } }，则需要访问props.route.params.params.name：

  console.log('Props JSON==============>', JSON.stringify(props.route.params));
  

• 检查导航配置：确认DraggableList页面在导航栈注册时，是否设置了默认参数，导致传递的参数被覆盖。

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