React Navigation v6嵌套导航linking配置Typescript类型报错问题

问题原因 #

你出现报错是由两个配置不匹配的问题共同导致的：

1. 根Stack导航器中承载Tab组件的屏幕名称是LoggedIn，但你在linking配置的screens中写的键名是TabNavigator，两者名称完全不对应，配置结构不符合React Navigation的要求。
2. 嵌套导航的父级路由配置必须显式声明path字段，哪怕你不需要父级路径填空字符串也可以，缺少path会触发TS类型校验不通过。
   另外你还存在一个隐式问题：linking配置中的Roundups拼写和Stack.Screen中定义的RoundUps（首字母U大写）不一致，后续深链匹配也会失效。

解决方案 #

按以下步骤修改配置即可：

1. 先确保你已经正确定义了全局路由参数列表RootStackParamList，示例如下：

import type { BottomTabScreenProps } from '@react-navigation/bottom-tabs';
import type { NativeStackScreenProps } from '@react-navigation/native-stack';

// 定义Tab导航的参数列表
type TabParamList = {
  Tab1: undefined;
  Tab2: undefined;
};

// 定义根Stack导航的参数列表
type RootStackParamList = {
  RoundUps: undefined;
  Account: undefined;
  LoggedIn: undefined;
};

2. 修改linking配置，修正路由名称匹配问题，补充父级路由的path字段，同时给linking对象显式指定类型避免后续拼写错误：

import type { LinkingOptions } from '@react-navigation/native';

export default function App() {
    // 显式指定LinkingOptions泛型为你的RootStackParamList
    const linking: LinkingOptions<RootStackParamList> = {
        prefixes: [prefix],
        config: {
            screens: {
                // 修正拼写和Stack.Screen保持一致
                RoundUps: 'roundups',
                Account: 'account',
                // 键名修改为和Stack.Screen的name一致的LoggedIn
                LoggedIn: {
                    // 必须添加path字段，不需要前缀可以填''
                    path: 'loggedin',
                    screens: {
                        Tab1: 'tab1',
                        Tab2: 'tab2',
                    },
                },
            },
        },
    };

    // 其余App组件代码保持不变
}

3. 同步修正TabNavigator组件的Props类型，将原来的'TabNavigator'改为根Stack中实际定义的路由名称'LoggedIn'：

// 修改前
// type Props = NativeStackScreenProps<RootStackParamList, 'TabNavigator'>;
// 修改后
type Props = NativeStackScreenProps<RootStackParamList, 'LoggedIn'>;

修改完成后TS报错即可完全消除，深链匹配也会正常生效。

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