When passing the navigation prop defined by:

let navigation = useNavigation()

To a component, the recommended way of typing is:

import {NavigationProp, ParamListBase} from '@react-navigation/native';

navigation: NavigationProp<ParamListBase>

Update:

An improved approach for robust navigation typing using the latest version of @react-navigation (6.x)

Here is a complete example:

import {NativeStackNavigationProp} from '@react-navigation/native-stack';

type RootStackParamList = {

   ScreenOne: undefined; //current screen

   ScreenTwo: {slug: string}; // a screen we are 
// navigating to in the current screen
// where we should pass a prop named `slug` 

   ScreenThree: {data: Array<string>};

   ScreenFour: undefined; // a screen we are navigating to 
// in the current screen without passing any props
};

interface IPageProps {
   navigation: NativeStackNavigationProp<RootStackParamList, 'ScreenOne'>;
}

// Since our screen is part of the stack, there's no need 
// to use `useNavigation()` to provide the `navigation` 
// to our component, we can simply access it as a prop

function Pdp({navigation}: IPageProps) {
   return ...
}

An example of a simple setup using version 6.x

import { NavigationProp } from "@react-navigation/native";

interface RouterProperties {
    navigation: NavigationProp<any, any>;
}

<TouchableOpacity onPress={() => navigation.navigate('Home')}>
    <Text>Click to Navigate Home</Text>
</TouchableOpacity>

Here's a successful example:

static navigationOptions = ({ navigation }: NavigationScreenProps) => ({
  ...
})

I encountered a similar issue and found a solution that worked for me:

import * as React from 'react'
import { NavigationScreenProps, NavigationStackScreenOptions } from 'react-navigation'

interface NavStateParams {
  someValue: string
}

// It is important to declare the type NavigationOptionsFn<TParams=any>
type NavigationOptionsFn<TParams=any> = (props: NavigationScreenProps<TParams>) => NavigationStackScreenOptions

class Screen extends React.Component {
  // This code snippet should resolve the issue
  static navigationOptions: NavigationOptionsFn<NavStateParams> = ({ navigation, screenProps }) => ({
    title: navigation.state.params.someValue
  })
}

If you want this to work globally, consider declaring the

NavigationOptionsFn<TParams>

type in a d.ts file.

My opinion is that using react-navigation 5.X has made things easier. Below is a guide on how to specify the type of navigation props that are passed to screens/components:

export default class Header extends React.Component<{
    navigation: StackNavigationHelpers;
}> {
...
}

Note: Verified with these versions

"@react-navigation/native": "^5.2.3",
"@react-navigation/stack": "^5.3.1",

 npm install --save-dev @types/jest @types/react-navigation

import { NavigationScreenProps } from "react-navigation";

export interface ILoginProps extends NavigationScreenProps<{}> { userStore: IUserStore }

export class LoginScreen extends React.Component { .... }

A straightforward fix

Start by including RootStackParamList type and PageProps interface in your navigator files

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import {
  createNativeStackNavigator,
  NativeStackNavigationProp,
} from '@react-navigation/native-stack';

import HomeScreen from './screens/Home';
import PasswordAddScreen from './screens/PasswordAdd';

export type RootStackParamList = {
  Home: undefined; // Define your props here
  PasswordAdd: undefined;
};

export interface PageProps<T extends keyof RootStackParamList> { // T is either Home or PasswordAdd
  navigation: NativeStackNavigationProp<RootStackParamList, T>;
}

const Stack = createNativeStackNavigator<RootStackParamList>();

function Navigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="PasswordAdd" component={PasswordAddScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default Navigator;

Next, add the following to your Component or Screen file

import React from 'react';
import { PageProps } from '../../Navigator';

function ItemsSeparator() {
  return <Divider my={1} bgColor="coolGray.50" />;
}

type Props = PageProps<'Home'>; // import and use the PageProps and pass the screen name - 
                                // exactly as it is in RootStackParamList

function HomeScreen({ navigation }: Props) {
  return (
    <Box safeArea bgColor="coolGray.100">
     ...
    </Box>
  );
}

export default HomeScreen;

That's it.

const screenOptions: NavigationScreenConfig<NavigationStackScreenOptions> = 
    ({navigation}) => ({/* Customize your navigation options here... */})

If you are still facing issues with extending NavigationScreenProps to properly type navigationOptions along with your custom props, here is a solution:

interface Props extends NavigationScreenProps {
  someProp: string;
  anotherProp: string;
}

export const SomeGreatScreen: NavigationScreenComponent<NavigationParams, {}, Props> = ({
  someProp,
  anotherProp,
}) => {
...
};

Using

NavigationScreenComponent<Props>

led to type errors for the destructured properties { someProp, anotherProp }. However, by specifying

NavigationScreenComponent<NavigationParams, {}, Props>

, this error was resolved. This is because the extended props type needs to be sent as the third parameter:

  export type NavigationScreenComponent<
    Params = NavigationParams,
    Options = {},
    Props = {}
  > = React.ComponentType<NavigationScreenProps<Params, Options> & Props> & {
    navigationOptions?: NavigationScreenConfig<Options>;
  };

source: react-navigation.d.ts

If you want to avoid manually describing all your navigation functions (e.g: navigate) in the Props' interface, you can simply extend NavigationScreenProps.

In my situation, it was necessary to prevent eslint from generating an error.

import { StackNavigator, NavigationScreenProps } from 'react-navigation';

export interface HomeScreenProps extends NavigationScreenProps {
/* add your custom props here */
};

export class HomeScreen extends React.Component<HomeScreenProps, object> {

  render() {
    return (
      <View style={styles.container}>       
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

Here's a solution that appears to be effective:

private static navigationOptions: NavigationScreenOptionsGetter<
  NavigationScreenOptions
> = (nav, props) => ({
  headerTitle: nav.state.params.someValue,
});

When the does not work section encounters an issue due to having "strictNullChecks": true in your tsconfig.json, it results in an error. Specifically, there is an error on the line:

navigation.state.params.someValue

In this context, params is considered optional. One solution is to verify if the value was provided and offer a default option if not, as shown below:

title: navigation.state.params && navigation.state.params.someValue || 'Default title'

Alternatively, if you're interested in creating a custom hook and exporting it, here's how you can go about it:

import {
  NavigationProp,
  ParamListBase,
  useNavigation,
} from "@react-navigation/native";

export const useAppNavigation: () => NavigationProp<ParamListBase> = useNavigation;

To use the custom hook:

IMPORT useAppNavigation FROM your file path and then implement it as follows:

const navigation = useAppNavigation();

const onPressSignUp = () => {
  navigation.navigate("SignUp");
};