Skip to content

useMatches missing genericΒ #14217

@y-nk

Description

@y-nk

Reproduction

Try to write a hook to generate breadcrumbs using useMatches such as:

import { UIMatch, useMatches } from 'react-router'

type BreadcrumbMatch = UIMatch<unknown, { breadcrumb: string }>

export function useBreadcrumbs(): { title: string; path?: string }[] {
  return useMatches()
    .filter((m): m is BreadcrumbMatch => !!m.handle?.breadcrumb)
    .map((match, i, a) => ({
      path: i < a.length - 1 ? match.pathname : undefined,
      title: match.handle.breadcrumb,
    }))
}

There will be a typescript error because handle is defaulted to unknown, which forces us to write:

type MaybeBreadcrumbMatch = UIMatch<unknown, { breadcrumb?: string }>

export function useBreadcrumbs(): { title: string; path?: string }[] {
  return (useMatches() as MaybeBreadcrumbMatch[])
    .filter((m): m is BreadcrumbMatch => !!m.handle?.breadcrumb)

System Info

Binaries:
    Node: 24.2.0
    pnpm: 10.13.1

(The rest is irrelevant to my issue.)

Used Package Manager

npm

Expected Behavior

There should be a way to pass the generics of returned UIMatch from the useMatches() hook. Maybe a useMatches<A = unknown, B = unknown>(): UIMatch<A, B>[] would be non breaking and appropriate.

Actual Behavior

There's no way to type correctly without making use of as because the default type of handle is unknown

Metadata

Metadata

Assignees

No one assigned

    Labels

    feature-requestUsed to close PRs that haven't gone through/been accepted the Proposal process yet

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions