React Native使用react-navigation route.params传参无法读取item属性如何解决

问题原因 #

你遇到的报错是由两个可修复的错误共同导致的：

1. 传参与接收参数的结构不匹配
   你在Home组件的navigation.navigate调用中，直接把item对象作为第二参数传递，此时route.params拿到的就是你的item本身（包含title、rating等字段），但你在ReviewDetails组件里试图从route.params中解构出item字段，自然会拿到undefined，调用undefined的title就触发了报错。
2. 页面路由配置不合理
   你把详情页reviewDetails配置到了底部标签导航中，用户如果直接点击底部标签进入详情页，此时没有任何参数传递，也会触发同样的报错。详情页属于二级页面，不应该放在底部标签导航栏中，建议用栈导航嵌套底部标签导航的方式配置路由。

修复步骤 #

1. 修正参数传递/接收逻辑

你可以选任意一种方式修改，保持传参和接收的结构一致即可：

• 方式一：修改ReviewDetails的参数获取逻辑，不需要解构item：

// reviewDetails.js
export default function ReviewDetails({ route, navigation }) {
  // 直接拿route.params就是你传的item对象
  const item = route.params;

  return (
    <View style={globalStyles.container}>
      <Text>{item.title}</Text>
    </View>
  );
}

• 方式二：修改Home的传参逻辑，把item包裹在item字段中：

// home.js
<TouchableOpacity onPress={()=> navigation.navigate("reviewDetails", {item})}> 
  <Text>{item.title}</Text>
</TouchableOpacity>

2. 修正路由配置（推荐）

把底部标签导航作为根栈导航的第一个页面，详情页单独放在栈导航里，避免用户直接点击标签进入无参数的详情页：

// navigation.js 调整为栈导航嵌套标签导航
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import React from 'react';

import about from '../screens/about'
import home from '../screens/home'
import reviewDetails from '../screens/reviewDetails'

const Tab= createBottomTabNavigator();
const Stack = createNativeStackNavigator();

// 底部标签导航组件
const TabNavigator = () => (
  <Tab.Navigator>
    <Tab.Screen name="about" component={about}></Tab.Screen>
    <Tab.Screen name="home" component={home}></Tab.Screen>
  </Tab.Navigator>
)

// 根栈导航
const AppNavigator=()=>(
  <Stack.Navigator>
    <Stack.Screen name="MainTabs" component={TabNavigator} options={{headerShown: false}} />
    <Stack.Screen name="reviewDetails" component={reviewDetails} />
  </Stack.Navigator>
) 

export default AppNavigator;

额外优化建议 #

可以给参数加可选链和默认值，避免极端情况报错：

const title = route.params?.title ?? '无标题'

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