React Navigation中navigation.navigate出现‘no overload matches this call’错误

调用navigation.navigate('CreateAccount')时触发类型错误，提示“no overload matches this call”，相关代码如下：

登录页面代码 #

import { useNavigation } from '@react-navigation/core';
import React from 'react';
import { SafeAreaView, Text, Image, TouchableOpacity, StyleSheet, Dimensions, TextInput, KeyboardAvoidingView, Platform } from 'react-native';

import abacatezinImg from '../assets/abacatezin.png';

export function LoginScreen(){
    const navigation = useNavigation();

    function handleCreate(){
        navigation.navigate('CreateAccount');
    }

    return(
        <SafeAreaView style={styles.container}>
                
                <Image source={abacatezinImg} style={styles.abacatezin}/>
                
                <Text style={styles.title}>
                    Faça seu login para começar
                </Text>

                <TextInput style={styles.input} placeholder="Email"/>
                <TextInput style={styles.input} placeholder="Senha"/>

                <TouchableOpacity >
                    <Text style={styles.botao1}>
                        Entrar
                    </Text>
                </TouchableOpacity>

                <TouchableOpacity onPress={handleCreate}>
                    <Text style={styles.botao2}>  
                        Criar conta
                    </Text>
                </TouchableOpacity>

                <Text style={styles.esquecenha}>
                    Esqueci minha senha
                </Text>
         
        </SafeAreaView>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'flex-start',
        backgroundColor: '#FAFFF9',
    },
    abacatezin:{
        marginTop: 58,
        width: 30,
        height: 36,
    },
    title:{
        fontSize: 34,
        fontWeight: '600',
        lineHeight: 42,
        marginTop: 45,
    },
    input:{
        borderWidth: 1,
        borderColor: '#7E9F70', 
        backgroundColor: '#FFFFFF',
        width: 327,
        height: 56,
        borderRadius: 10,
        fontSize: 18,
        textAlign: 'left',
        padding: 11,
        marginTop: 32,
        marginBottom: -12,
    },
    botao1:{
        backgroundColor: '#7E9F70',
        width: 327,
        height: 53,
        borderRadius: 37,
        padding: 12,
        paddingHorizontal: 121,
        color: '#FFFFFF',
        fontSize: 20,
        fontWeight: '700',
        marginTop: 44,
    },
    botao2:{
        backgroundColor: '#FFFFFF',
        width: 327,
        height: 53,
        borderRadius: 37,
        padding: 12,
        paddingHorizontal: 105,
        borderWidth: 1,
        color: '#7E9F70',
        borderColor: '#7E9F70',
        fontSize: 20,
        fontWeight: '700',
        marginTop: 14,
    },
    esquecenha:{
        fontSize: 16,
        fontWeight: '400',
        lineHeight: 27,
        borderBottomWidth: 1,
        marginTop: 34,
    }
});

路由配置代码 #

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { LoginScreen } from '../pages/LoginScreen';
import { CreateAccount } from '../pages/CreateAccount';

const stackRoutes = createStackNavigator();

const AppRoutes: React.FC = () => (
    <stackRoutes.Navigator
        /*headerMode="none"*/
        screenOptions={{cardStyle: {backgroundColor: '#FFF'}, headerShown: false}}
    >

        <stackRoutes.Screen
            name="LoginScreen"
            component={LoginScreen}
        />
        <stackRoutes.Screen
            name="CreateAccount"
            component={CreateAccount}
        />

    </stackRoutes.Navigator>
)

export default AppRoutes;

问题原因 #

这是TypeScript类型校验导致的错误：默认useNavigation返回的导航实例未绑定你的自定义路由列表，TypeScript无法识别CreateAccount是合法的路由名称，因此抛出类型不匹配提示。

解决方案 #

1. 定义路由参数类型

在路由配置文件中，先声明所有路由的名称及对应的参数类型（无需参数则设为undefined）：

type RootStackParamList = {
  LoginScreen: undefined;
  CreateAccount: undefined;
};

2. 给Stack Navigator绑定类型

修改createStackNavigator的调用，传入上述类型：

const stackRoutes = createStackNavigator<RootStackParamList>();

3. 给组件的导航实例指定类型

在LoginScreen中，导入StackNavigationProp并给useNavigation添加类型约束：

import { useNavigation, StackNavigationProp } from '@react-navigation/native';

// 指定当前页面的导航类型
type LoginScreenNavigationProp = StackNavigationProp<RootStackParamList, 'LoginScreen'>;

export function LoginScreen(){
    const navigation = useNavigation<LoginScreenNavigationProp>();

    function handleCreate(){
        navigation.navigate('CreateAccount'); // 此时TypeScript能正确识别该路由
    }

    // 其余代码保持不变
}

完整修改后的路由配置

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import { LoginScreen } from '../pages/LoginScreen';
import { CreateAccount } from '../pages/CreateAccount';

// 定义路由参数类型
type RootStackParamList = {
  LoginScreen: undefined;
  CreateAccount: undefined;
};

// 绑定类型到Stack Navigator
const stackRoutes = createStackNavigator<RootStackParamList>();

const AppRoutes: React.FC = () => (
    <stackRoutes.Navigator
        screenOptions={{cardStyle: {backgroundColor: '#FFF'}, headerShown: false}}
    >
        <stackRoutes.Screen
            name="LoginScreen"
            component={LoginScreen}
        />
        <stackRoutes.Screen
            name="CreateAccount"
            component={CreateAccount}
        />
    </stackRoutes.Navigator>
)

export default AppRoutes;

非TypeScript项目排查方向 #

如果项目未使用TypeScript，可能是依赖版本不兼容：检查@react-navigation/core与@react-navigation/stack的版本是否一致，建议升级到最新兼容版本。

内容的提问来源于stack exchange，提问作者Lucca