Integration issues between @heroui/react and @tanstack/router: TypeScript errors with link components

[juancarlosf2]

While I've successfully implemented a custom Link component that works with proper TypeScript support, I'm experiencing issues with @heroui/react's polymorphic pattern (as prop) when used with @tanstack/router. Specifically, when trying to use Button with as={Link}, TypeScript doesn't properly recognize router-specific props like params.

Current Behavior

My custom Link component works with full TypeScript support (see implementation below)
When using Button with as={Link}, TypeScript doesn't properly recognize router props
No intellisense for router-specific props like params, search, etc. in polymorphic contexts

Expected Behavior

Button with as={Link} should maintain full type checking for all router props, providing proper intellisense and type safety.

Reproduction

I've created a minimal reproduction of this issue in this sandbox

This sandbox demonstrates the typing issues when using Button with Link as a polymorphic component.

Code Examples
My working Link implementation (with proper types):

import * as React from "react";
import {
  createLink,
  LinkComponent,
  LinkProps as TanStackLinkProps,
} from "@tanstack/react-router";
import { Link as HeroUILink } from "@heroui/react";

// Create a proper type that combines both components' props
export type CustomLinkProps = TanStackLinkProps &
  Omit<React.ComponentProps<typeof HeroUILink>, keyof TanStackLinkProps>;

const CreatedLinkComponent = createLink(HeroUILink);

export const Link = React.forwardRef<HTMLAnchorElement, CustomLinkProps>(
  (props, ref) => {
    return <CreatedLinkComponent preload="intent" {...props} ref={ref} />;
  }
);

Link.displayName = "Link";
Polymorphic component issue (Button with as={Link}):
tsx

import { Button } from "@heroui/react";
import { createFileRoute } from "@tanstack/react-router";
import { Link } from "~/components/Link";

export const Route = createFileRoute("/")({
  component: Home,
});

function Home() {
  return (
    <div className="p-2">
      <h3>Welcome Home!</h3>
      <Button
        as={Link}
        to="/posts/$postId" 
        params={{ // TypeScript doesn't recognize this prop in this context
          postId: "3",
        }}
        color="primary"
      >
        View Post
      </Button>
    </div>
  );
}

Environment

@heroui/react version: 2.7.4
@tanstack/react-router version: 1.112.0
@tanstack/react-start version: 1.112.3
React version: 19.0.0
TypeScript version: 5.7.2
Browser: Chrome latest
OS: macOS Sonoma 14.3

Additional Information

I've successfully implemented a custom Link component that properly merges types from both TanStack Router and HeroUI, providing full intellisense for router props. However, when using HeroUI's polymorphic pattern (as prop) with Button or other components, TypeScript doesn't correctly propagate the router props to the resulting component.

The issue appears to be in how type information is handled when using the polymorphic pattern with components that have specialized prop requirements like TanStack Router's Link.

I'm looking for a solution that maintains full type safety while allowing use of HeroUI's polymorphic components with TanStack's routing capabilities.