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

Issue

I try to use Typescipt 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?

Solution

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

Answered By - DinhNguyen