问TypeError: props.navigation.getParam不是一个函数。(在“props.navigation.getParam(‘docId’)”中，“props.navigation.getParam”未定义)

EN

import { useNavigation } from '@react-navigation/core'
import React from 'react'
import { StyleSheet, Text, TouchableOpacity, View, FlatList, ScrollView, Pressable } from 'react-native'
import { auth } from '../firebase'
import { DOC } from '../Data/dummy-data'





const HomeScreen = props => {
  const navigation = useNavigation()

  const handleSignOut = () => {
    auth
      .signOut()
      .then(() => {
        navigation.replace("Login")
      })
      .catch(error => alert(error.message))
  }

  const renderGridItem = (itemData) => {
    return ( 
      <TouchableOpacity 
      style={styles.grid}
      onPress={ () => { 
        navigation.navigate('Doctors',{docId:itemData.item.id})
        
  }}>
    <View>
      <Text>
        {itemData.item.title}
      </Text>
    </View>
    </TouchableOpacity>
    )
  }

  return (
    <View style={styles.container}>

      
    

      <FlatList keyExtractor={(item, index) => item.id} 
      data={DOC} 
      renderItem={renderGridItem} />

      <Text style={styles.txt}>Email: {auth.currentUser?.email}</Text>
      <TouchableOpacity
        onPress={handleSignOut}
        style={styles.button}
      >
        <Text style={styles.buttonText}>Sign out</Text>
      </TouchableOpacity>

      
    </View>
  )
}


HomeScreen.navigationOptions = {
  headerTitle: 'All Doctors',
  headerStyle: {
    backgroundColor: 'red'
  },
  headerTintColor: 'red'
};

export default HomeScreen


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    
  },
   button: {
    backgroundColor: '#0782F9',
    width: '60%',
    padding: 15,
    borderRadius: 10,
    alignItems: 'center',
    marginTop: 40,
  },
  buttonText: {
    color: 'white',
    fontWeight: '700',
    fontSize: 16,
  },
  txt:{
    fontSize:20,
    color:'black',
    alignItems:'flex-start'
  },
  screen:{
    marginTop:10,
    width:'30%',
    height:2,
    borderRadius:10,
    backgroundColor:'red',
    
  },
  grid:{
    flex:1,
    margin:15,
    height:150
  },
})

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import { DOC } from '../Data/dummy-data'

const Doctors = props => {
  const docId = props.navigation.getParam('docId')
  const selectedCategory = DOC.find(doc => doc.id === docId)
  return (
    <View>
      <Text>{selectedCategory.title}</Text>
    </View>
  )
}

export default Doctors

const styles = StyleSheet.create({})