React Native商品详情页Cannot read property 'params' of undefined错误求助

错误根源1：路由传参语法错误 #

你在ProductItem的跳转逻辑里犯了语法错误，导致参数根本没传递到目标页面：

// 错误写法：逗号分隔了两个独立表达式，参数未传入navigate方法
onPress={() => {
  navigation.navigate('ProductDetails'), {productID: index};
}}

这里的逗号是表达式分隔符，实际只执行了navigation.navigate('ProductDetails')，后面的{productID: index}是一个无用的独立对象，完全没被作为参数传递。

正确写法是把参数作为navigate方法的第二个参数传入：

onPress={() => {
  navigation.navigate('ProductDetails', {productID: index});
}}

错误根源2：组件引用不匹配 #

在MainNavigator中，你指定productDetailScreen作为ProductDetails页面的组件，但你的详情页导出的是ProductDetail。如果没有正确导入并命名为productDetailScreen，会导致页面组件无法接收React Navigation注入的route和navigation props，直接引发route为undefined的错误。

检查主导航器文件的导入与组件引用：

// 确保导入正确的组件
import ProductDetail from './path-to-your-product-detail-screen';

// 在Stack.Screen中使用匹配的组件名
<Stack.Screen
  name="ProductDetails"
  component={ProductDetail} // 此处要和导入的组件名一致
  options={{headerShown: false}}
/>

额外优化建议 #

为避免参数未传递时的报错，建议在详情页给route.params添加默认值或可选链判断：

const ProductDetail = ({route, navigation}) => {
  const productID = route?.params?.productID ?? '默认ID';
  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Product Detail: {productID}</Text>
    </View>
  );
};

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