React Native路由参数访问异常：可见参数但route.params为undefined

常见问题排查与修复步骤 #

1. 检查跳转时的参数传递格式
   确认Input页面中navigation.navigate的调用是否正确。正确的传参应该是将参数对象作为第二个参数直接传入，而非嵌套在额外的params字段中：

   // 正确写法
   navigation.navigate('Home', { data: 你的数组数据 });
   
   // 错误写法（会导致route.params指向外层params，数据实际在route.params.params.data）
   // navigation.navigate('Home', { params: { data: 你的数组数据 } });
   

2. 确认组件接收route的方式
   确保Home页面正确获取路由传入的route props：

   // 函数组件写法
   function Home({ route }) {
     // 使用可选链避免未传参时的报错
     const targetData = route.params?.data;
     console.log('接收的数据:', targetData);
     // ...
   }
   
   // 类组件写法
   class Home extends React.Component {
     componentDidMount() {
       const targetData = this.props.route.params?.data;
       console.log('接收的数据:', targetData);
     }
     // ...
   }
   

   注意不要自行定义route变量，或者解构时出现拼写错误。

3. 核对路由名称的一致性
   检查StackNavigator的配置中，Home页面的路由名称和跳转时使用的名称完全一致（大小写敏感）。名称不匹配会导致路由创建新页面实例但不传递参数。

4. 确认传参数据的就绪状态
   如果数组数据是异步获取的（比如接口请求、本地存储读取），需确保数据加载完成后再执行跳转：

   const loadAndNavigate = async () => {
     // 等待数据获取完成
     const arrayData = await fetchTargetArray();
     // 数据就绪后跳转传参
     navigation.navigate('Home', { data: arrayData });
   };
   

调试建议 #

• 打印完整的route结构，明确参数层级：

  console.log('完整Route结构:', JSON.stringify(route));
  

• 使用可选链操作符?.安全访问参数，同时避免因未传参导致的报错。

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