React Native导航传参报错：Cannot read property 'params' of undefined

你遇到的Cannot read property 'params' of undefined错误，核心原因有两个可能：

1. 导航结构问题：dettagliocliente页面可能直接注册为Drawer Navigator的子页面，而非嵌套在Stack Navigator中。抽屉导航的顶层页面之间跳转时，参数传递机制和Stack内跳转不同，导致route props无法正常传递。
2. 组件未正确接收route props：如果dettagliocliente没有被正确配置为导航屏幕，或者组件没有通过props获取route，就会出现route为undefined的情况。

方案1：调整导航结构，将目标页面嵌套在Stack中 #

确保Clienti所在的抽屉项是一个Stack Navigator，把dettagliocliente作为该Stack的子页面。示例配置如下：

import { createDrawerNavigator } from '@react-navigation/drawer';
import { createStackNavigator } from '@react-navigation/stack';
import Clienti from './clienti';
import DettaglioCliente from './dettagliocliente';

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();

// 为Clienti页面创建嵌套Stack
function ClientiStack() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Clienti" component={Clienti} />
      <Stack.Screen name="dettagliocliente" component={DettaglioCliente} />
    </Stack.Navigator>
  );
}

// 抽屉导航主结构
export default function AppNavigator() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="ClientiStack" component={ClientiStack} options={{ title: 'Clienti' }} />
      {/* 其他抽屉项 */}
    </Drawer.Navigator>
  );
}

这样从Clienti跳转到dettagliocliente属于Stack内的跳转，参数能正常通过route.params获取。

方案2：使用useRoute钩子获取路由参数 #

如果不想调整导航结构，修改dettagliocliente.js，使用React Navigation提供的useRoute钩子获取参数，并添加空值判断避免报错：

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { useRoute } from '@react-navigation/native';

export default function DettaglioCliente() {
  const route = useRoute();
  // 添加空值判断，防止参数未传递时报错
  const client = route.params?.client || {};

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Dettaglio Cliente</Text>
      <Text style={styles.detail}>Ragione Sociale: {client.ragione_sociale || 'N/A'}</Text>
      <Text style={styles.detail}>PIVA: {client.piva || 'N/A'}</Text>
      <Text style={styles.detail}>Indirizzo: {client.indirizzo || 'N/A'}</Text>
      <Text style={styles.detail}>Città: {client.citta || 'N/A'}</Text>
    </View>
  );
}

// 补全样式
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  detail: {
    fontSize: 16,
    marginBottom: 8,
  },
});

方案3：确认页面名称完全匹配 #

检查导航配置中dettagliocliente的名称是否和navigate('dettagliocliente', { client })中的名称完全一致（大小写敏感），名称不匹配也会导致参数传递失败。

1. 确认导航结构中dettagliocliente属于Clienti所在的Stack。
2. 修改dettagliocliente.js使用useRoute并添加空值判断。
3. 重新运行项目，点击列表项跳转后查看是否能正常显示客户信息。

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