Type inference issue with meta function's matches argument

[tobigumo]

I'm using React Router as a...

framework

Reproduction

https://stackblitz.com/edit/github-jh2463uj?file=app%2Froutes%2Fhome.tsx

function "meta" in home.tsx

export function meta({ matches }: Route.MetaArgs) {
  // In versions prior to v7.0.1, the parent route data was inferred correctly.
  // From v7.0.2 onwards, match.id becomes unknown and type inference fails.
  const metaMatch = matches.find((match) => match && match.id === 'root');
  return [
    { title: 'New React Router App' },
    { name: 'description', content: 'Welcome to React Router!' },
  ];
}

System Info

I tested it with React Router v7.0.1, v7.0.2, and v7.1.5.


  System:
    OS: Linux 5.0 undefined
    CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 0 Bytes / 0 Bytes
    Shell: 1.0 - /bin/jsh
  Binaries:
    Node: 18.20.3 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.2.3 - /usr/local/bin/npm
    pnpm: 8.15.6 - /usr/local/bin/pnpm
  npmPackages:
    @react-router/dev: 7.0.2 => 7.0.2 
    @react-router/node: 7.0.2 => 7.0.2 
    @react-router/serve: 7.0.2 => 7.0.2 
    react-router: 7.0.2 => 7.0.2 
    vite: ^5.4.11 => 5.4.14

Used Package Manager

npm

Expected Behavior

In versions prior to v7.0.1, the parent route data was inferred correctly.

match is inferred as follows:

(parameter) match: {
    id: "root";
    params: {};
    pathname: string;
    meta: MetaDescriptor[];
    data: {
        path: string;
    };
    handle?: unknown;
    error?: unknown;
}

Actual Behavior

From v7.0.2 onwards, match.id becomes unknown and type inference fails.

match is inferred as follows:

(parameter) matches: [{
    id: "root";
    params: {} & {
        [key: string]: string | undefined;
    };
    pathname: string;
    meta: MetaDescriptor[];
    data: {
        path: string;
    };
    handle?: unknown;
    error?: unknown;
}, {
    id: "routes/home";
    params: {} & {
        [key: string]: string | undefined;
    };
    pathname: string;
    meta: MetaDescriptor[];
    data: {
        name: string;
    };
    handle?: unknown;
    error?: unknown;
}, ...({
    id: unknown;
    params: unknown;
    pathname: string;
    meta: MetaDescriptor[];
    data: unknown;
    handle?: unknown;
    error?: unknown;
} | undefined)[]]

[akomm]

Similar, because backed by same generated type:

Route.ComponentProps['matches']

Can not be narrowed down by match.id because its unknown (+optional).

"unknown" is a set that includes all types except never, so a distribution over the union results in unknown. Because the type also adds undefined matches, the id property additional becomes optional, since potentially not defined.

Illustration in TS Playground

If you want to pick route matches by id type-safe, you could currently use this:

type GetMatches<T> = T extends {id: string} ? T : never
type GetMatch<M extends {id: string}, I extends M["id"]> = M extends {id: I}
  ? M
  : never

function getRouteMatch<T, M extends GetMatches<T>, I extends M["id"]>(
  id: I,
  matches: T[],
): GetMatch<M, I> {
  return matches.find(match => (match as any).id === id) as any
}

In component usage:

export default function RouteComponent({matches}: Route.ComponentProps) {
  let match = getRouteMatch('routes/foo', matches) // id autocomplete and typed match result on *known* parent routes.
}

[jenseo]

I have the exact same problem, type inference broke down. Thanks @akomm , your workaround does the job perfectly, just hope we don't have to use it soon :)

[akomm]

You could use the following workaround so you can later replace in your project matchesFind(matches with matches.find:

type GetKnownMatches<M> = M extends {id: string} ? M : never

function matchesFind<
    Matches, 
    MatchesKnown extends GetKnownMatches<Matches>, 
    Result extends MatchesKnown
>(matches: Matches[], predicate: (v: MatchesKnown) => v is Result): Result {
    return (matches as any).find(predicate)
}

Because its more compatible with array find semantic:

let r1 = matchesFind(as, a => a.id === "foo")

Example:
TS Playground

[pcattori]

This is fixed in v.7.1.0 (https://stackblitz.com/edit/github-jh2463uj-l2yepqqf?file=package.json)