fix: MatchRoute types (#7139)

Co-authored-by: schiller-manuel <schiller-manuel@users.noreply.github.com>
Co-authored-by: nx-cloud[bot] <71083854+nx-cloud[bot]@users.noreply.github.com>

Author: schiller-manuel

.changeset/fair-phones-grow.md

@@ -0,0 +1,7 @@
+---
+'@tanstack/react-router': patch
+'@tanstack/solid-router': patch
+'@tanstack/vue-router': patch
+---
+
+Fix `MatchRoute` child callback param inference to resolve params from the target `to` route instead of the route path key across React, Solid, and Vue adapters.

packages/react-router/src/Matches.tsx

@@ -22,11 +22,8 @@ import type {
   MakeRouteMatchUnion,
   MaskOptions,
   MatchRouteOptions,
-  NoInfer,
   RegisteredRouter,
-  ResolveRelativePath,
   ResolveRoute,
-  RouteByPath,
   ToSubOptionsProps,
 } from '@tanstack/router-core'
 
@@ -180,10 +177,9 @@ export type MakeMatchRouteOptions<
   // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
   children?:
     | ((
-        params?: RouteByPath<
-          TRouter['routeTree'],
-          ResolveRelativePath<TFrom, NoInfer<TTo>>
-        >['types']['allParams'],
+        params?: Expand<
+          ResolveRoute<TRouter, TFrom, TTo>['types']['allParams']
+        >,
       ) => React.ReactNode)
     | React.ReactNode
 }

packages/react-router/tests/Matches.test-d.tsx

@@ -8,7 +8,8 @@ import {
   useMatchRoute,
   useMatches,
 } from '../src'
-import type { AnyRouteMatch, RouteMatch } from '../src'
+import type * as React from 'react'
+import type { AnyRouteMatch, MakeMatchRouteOptions, RouteMatch } from '../src'
 
 const rootRoute = createRootRoute()
 
@@ -233,3 +234,19 @@ test('when filtering useMatches by loaderData with an array', () => {
     matches.filter((match) => isMatch(match, 'loaderData.0.comment')),
   ).toEqualTypeOf<Array<CommentsMatch>>()
 })
+
+test('MatchRoute children are typed from resolved params under pathless layouts', () => {
+  type CommentsMatchRouteChildren = MakeMatchRouteOptions<
+    DefaultRouter,
+    string,
+    '/comments/$id'
+  >['children']
+  type CommentsMatchRouteRenderFn = Extract<
+    CommentsMatchRouteChildren,
+    (...args: Array<any>) => any
+  >
+
+  expectTypeOf<CommentsMatchRouteRenderFn>().toEqualTypeOf<
+    (params?: { id: string } | undefined) => React.ReactNode
+  >()
+})

packages/solid-router/src/Matches.tsx

@@ -17,11 +17,8 @@ import type {
   MakeRouteMatchUnion,
   MaskOptions,
   MatchRouteOptions,
-  NoInfer,
   RegisteredRouter,
-  ResolveRelativePath,
   ResolveRoute,
-  RouteByPath,
   ToSubOptionsProps,
 } from '@tanstack/router-core'
 
@@ -166,10 +163,9 @@ export type MakeMatchRouteOptions<
   // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
   children?:
     | ((
-        params?: RouteByPath<
-          TRouter['routeTree'],
-          ResolveRelativePath<TFrom, NoInfer<TTo>>
-        >['types']['allParams'],
+        params?: Expand<
+          ResolveRoute<TRouter, TFrom, TTo>['types']['allParams']
+        >,
       ) => Solid.JSX.Element)
     | Solid.JSX.Element
 }

packages/solid-router/tests/Matches.test-d.tsx

@@ -10,6 +10,7 @@ import {
 } from '../src'
 import type { AnyRouteMatch, RouteMatch } from '@tanstack/router-core'
 import type * as Solid from 'solid-js'
+import type { MakeMatchRouteOptions } from '../src'
 
 const rootRoute = createRootRoute()
 
@@ -234,3 +235,19 @@ test('when filtering useMatches by loaderData with an array', () => {
     matches.filter((match) => isMatch(match, 'loaderData.0.comment')),
   ).toEqualTypeOf<Array<CommentsMatch>>()
 })
+
+test('MatchRoute children are typed from resolved params under pathless layouts', () => {
+  type CommentsMatchRouteChildren = MakeMatchRouteOptions<
+    DefaultRouter,
+    string,
+    '/comments/$id'
+  >['children']
+  type CommentsMatchRouteRenderFn = Extract<
+    CommentsMatchRouteChildren,
+    (...args: Array<any>) => any
+  >
+
+  expectTypeOf<CommentsMatchRouteRenderFn>().toEqualTypeOf<
+    (params?: { id: string } | undefined) => Solid.JSX.Element
+  >()
+})

packages/vue-router/src/Matches.tsx

@@ -15,11 +15,8 @@ import type {
   MakeRouteMatchUnion,
   MaskOptions,
   MatchRouteOptions,
-  NoInfer,
   RegisteredRouter,
-  ResolveRelativePath,
   ResolveRoute,
-  RouteByPath,
   ToSubOptionsProps,
 } from '@tanstack/router-core'
 
@@ -198,10 +195,7 @@ export type MakeMatchRouteOptions<
   // If a function is passed as a child, it will be given the `isActive` boolean to aid in further styling on the element it returns
   children?:
     | ((
-        params?: RouteByPath<
-          TRouter['routeTree'],
-          ResolveRelativePath<TFrom, NoInfer<TTo>>
-        >['types']['allParams'],
+        params?: ResolveRoute<TRouter, TFrom, TTo>['types']['allParams'],
       ) => Vue.VNode)
     | Vue.VNode
 }