How do I resolve 'Argument types do not match parameters' in TypeScript with React Navigation?

Question

I try to use Typescript in ReactNavigation, and got error by IDE (webstorm)

My Navigator:

export type RootStackParamList = {
    AppStack: undefined;
    AuthStack: undefined;
};

const RootStack = createStackNavigator<RootStackParamList>();

const Navigation: React.FunctionComponent = () => {
    return (
        <RootStack.Navigator>
            <RootStack.Screen name="AuthStack" component={AuthStack} />
            <RootStack.Screen name="AppStack" component={AppStack} />
        </RootStack.Navigator>
    );
}

My LoginScreen in AuthStack:

type NavigationProps = StackNavigationProp<RootStackParamList>;
const LoginScreen = () => {
    const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
    const requestLogin = () => {
        navigation.navigate('AppStack');  // IDE show error in 'AppStack'
    }
}

I run app and everything ok, but the IDE still show error: Argument types do not match parameters. It isn't an eslint error.

How can I fix this error?

Answer 1

Seems like it's a bug of old version of Webstorm. I just update Webstorm to 2023.2.5 and the error disappear