TypeScript路由参数类型联动：匹配目标页面参数类型求助

I get it—you want TypeScript to automatically enforce that the params passed to the VerifyUser route match exactly what the target screen expects, based on the screenToNavigateTo value. Your previous attempt wasn't working because you were linking params to the screen name type instead of the screen's parameter type. Let's fix that with some TypeScript magic using mapped and union types.

Step-by-Step Fix #

First, let's define a combined type that includes all the target screens you want to navigate to (excluding VerifyUser itself from EditProfileRoutes, plus all screens from ManageAccountRoutes):

// Combine all target routes into one type
type TargetNavigationRoutes = Omit<EditProfileRoutes, 'VerifyUser'> & ManageAccountRoutes;

Next, we'll create a union type that links each target screen name to its exact parameter type. This is where mapped types do the heavy lifting—we iterate over every key in TargetNavigationRoutes, and for each key, we create an object where screenToNavigateTo is that key, and params is the corresponding parameter type for that screen:

// Create a union of type-safe parameter objects for VerifyUser
type VerifyUserNavigationParams = {
  [ScreenKey in keyof TargetNavigationRoutes]: {
    screenToNavigateTo: ScreenKey;
    params: TargetNavigationRoutes[ScreenKey];
  };
}[keyof TargetNavigationRoutes];

Now, update your EditProfileRoutes to use this new union type for the VerifyUser route:

export type EditProfileRoutes = { 
  Options: undefined; 
  Name: undefined; 
  Username: { token: string }; 
  Bio: undefined; 
  Location: undefined; 
  VerifyUser: VerifyUserNavigationParams; 
};

How This Works #

When you call navigation.navigate('VerifyUser', ...), TypeScript will now enforce a strict link between screenToNavigateTo and params:

• If you set screenToNavigateTo: 'Username', TypeScript will require params to be { token: string }
• If you set screenToNavigateTo: 'Options' (or any other screen with undefined params), TypeScript will expect params to be undefined (or you can omit it entirely)
• This also automatically works with any screens from ManageAccountRoutes—their parameter types will be enforced too

Why Your Original Approach Failed #

Your original code had params?: EditProfileRoutes['VerifyUser']['screenToNavigateTo'], which was telling TypeScript that params should be a screen name (like 'Username' or 'Options') instead of the parameter type that screen expects. That's why the type checking wasn't working as intended.

Example Usage #

Now you'll get proper type hints and errors when using the route:

// ✅ Valid: params matches Username's required type
navigation.navigate('VerifyUser', { 
  screenToNavigateTo: 'Username', 
  params: { token: 'abc123' } 
});

// ✅ Valid: params is undefined (matches Options' type)
navigation.navigate('VerifyUser', { 
  screenToNavigateTo: 'Options', 
  params: undefined 
});

// ❌ Error: params doesn't match Username's type
navigation.navigate('VerifyUser', { 
  screenToNavigateTo: 'Username', 
  params: { some: 'value' } 
});

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