React Native报错：Cannot read property 'params' of undefined，无法传值至BottomSheet

问题根源 #

1. 参数传递写法错误：ProductItem里的onPress用了逗号运算符，只会执行handleSnapPress(0)，{product: item}根本没被当作参数传递出去。
2. 组件未正确获取参数：ProductOption试图从route.params取数据，但如果这个组件是本地渲染的BottomSheet内容而非React Navigation路由页面，route props不会自动注入，直接解构就会报错。

修复方案 #

1. 修正ProductItem的参数传递逻辑 #

把参数正确传入handleSnapPress：

<TouchableOpacity onPress={() => handleSnapPress(0, { product: item })}>
  {/* 你的组件内容 */}
</TouchableOpacity>

2. 调整handleSnapPress，传递数据给ProductOption #

通过状态管理BottomSheet的显示状态和要传递的商品数据：

import { useState } from 'react';

// 定义状态存储选中的商品和BottomSheet索引
const [selectedProduct, setSelectedProduct] = useState(null);
const [bottomSheetIndex, setBottomSheetIndex] = useState(-1);

const handleSnapPress = (index, { product }) => {
  setSelectedProduct(product);
  setBottomSheetIndex(index);
};

3. 修改ProductOption组件，直接接收product参数 #

不再依赖route，直接把product作为props传入：

const ProductOption = ({ handleClosePress, product }) => {
  // 直接使用product数据
  return (
    <BottomSheet 
      index={bottomSheetIndex} 
      backgroundStyle={{backgroundColor: colors.bodyColor}}
      onClose={handleClosePress}
    >
      <BottomSheetView>
        {/* 这里渲染product相关内容 */}
      </BottomSheetView>
    </BottomSheet>
  );
};

// 渲染ProductOption时传入参数
<ProductOption handleClosePress={handleClosePress} product={selectedProduct} />

补充：如果用React Navigation路由打开BottomSheet #

若BottomSheet是作为modal路由页面打开，需用导航跳转传递参数：

// ProductItem中改为导航跳转
<TouchableOpacity onPress={() => navigation.navigate('ProductOption', { product: item })}>
  {/* 组件内容 */}
</TouchableOpacity>

// ProductOption作为路由页面，可正常获取route参数
const ProductOption = ({ handleClosePress, route, navigation }) => {
  const { product } = route.params;
  return (
    <BottomSheet 
      index={-1} 
      backgroundStyle={{backgroundColor: colors.bodyColor}}
      onClose={() => navigation.goBack()}
    >
      <BottomSheetView>
        {/* 渲染内容 */}
      </BottomSheetView>
    </BottomSheet>
  );
};

内容的提问来源于stack exchange，提问作者Khuong Viet Tai