Reactjs 无法读取未定义的react native 的属性参数

我正在对产品详细信息进行编码，但不能使用Params属性

无法读取未定义的属性‘Params’ 你可以在这里看到我的代码

import React from 'react';
import {Image, Text, View} from 'react-native';

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

export default ProductDetail;

产品项目

const CardHeight = 220;
const ProductItem = ({list}) => {
  const navigation = useNavigation();
  return (
    <ScrollView>
      {list?.map((item, index) => {
        return (
          
                <TouchableOpacity
                  style={{
                    borderRadius: sizes.radius,
                    overflow: 'hidden',
                    flexDirection: 'row',
                  }}
                  onPress={() => {
                    navigation.navigate('ProductDetails'), {productID: index};
                  }}>
                  .....
  );
};

export default ProductItem;

主导航器

const Stack = createStackNavigator();

const 主导航器 = () => {
  return (
    <NavigationContainer>
      <StatusBar hidden />
      <Stack.Navigator>
        
        
        <Stack.Screen
          name="Root"
          component={TabDrawer}
          options={{
            headerShown: false,
            useNativeDriver: true,
            gestureEnabled: false,
          }}
        />
        
        <Stack.Screen
          name="ProductDetails"
          component={productDetailScreen}
          options={{headerShown: false}}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default 主导航器;

我试着沿着传递的参数到react 导航的路由，但没有成功 产品详细信息

我不知道这个错误是从哪里来的，有人能具体给我解释一下吗