react-navigation v6中如何覆写全局RootParamList避免TS类型报错

报错原因 #

这个错误由两种情况触发：

• 你的项目中已经存在另一个声明文件，在ReactNavigation命名空间下定义过RootParamList接口
• 你把声明代码写在了带import/export的普通模块文件中，没有正确包裹全局声明，导致声明冲突

修复步骤 #

1. 首先确保你项目中只有一处做RootParamList全局声明，删除其他文件中重复的RootParamList声明代码
2. 新建专门的全局类型声明文件（比如命名为navigation.d.ts，放在项目根目录或者src目录下），按如下规则编写：
   • 如果你的RootStackParamList定义在其他文件中，需要在声明文件头部导入，最后加空export语句标记为模块，全局声明才会生效：

     // navigation.d.ts
     import type { RootStackParamList } from './你的RootStackParamList定义文件路径';
     
     declare global {
       namespace ReactNavigation {
         interface RootParamList extends RootStackParamList {}
       }
     }
     
     export {};
     

   • 如果你的RootStackParamList直接在该声明文件中定义，不需要加import和空export：

     // navigation.d.ts
     type RootStackParamList = {
       Home: undefined;
       Detail: { id: string };
       // 补充你自己的路由参数定义
     };
     
     declare global {
       namespace ReactNavigation {
         interface RootParamList extends RootStackParamList {}
       }
     }
     

3. 确认你的tsconfig.json的include数组包含了该声明文件的路径，示例配置如下：

   {
     "include": ["src/**/*", "navigation.d.ts"]
   }
   

4. 重启TypeScript语言服务即可消除报错：VSCode用户按下Ctrl+Shift+P（Mac为Cmd+Shift+P），选择TypeScript: Restart TS Server。

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