quickest-silver

How to properly type my Navbar Item Component with <Link />?

Hi, I'm trying to make a navigation item component, but am getting errors in my editor. Here is the code:

import { PropsWithChildren } from 'react';
import { Link, ToOptions } from '@tanstack/react-router';

interface NavigationItemProps extends PropsWithChildren<ToOptions> {
  className?: string;
}

export const NavigationItem = ({
  to,
  search,
  params,
  className,
  children,
}: NavigationItemProps) => {
  return (
    <div className={className}>
      <Link to={to} search={search} params={params}>
        {children}
      </Link>
    </div>
  );
};

import { PropsWithChildren } from 'react';
import { Link, ToOptions } from '@tanstack/react-router';

interface NavigationItemProps extends PropsWithChildren<ToOptions> {
  className?: string;
}

export const NavigationItem = ({
  to,
  search,
  params,
  className,
  children,
}: NavigationItemProps) => {
  return (
    <div className={className}>
      <Link to={to} search={search} params={params}>
        {children}
      </Link>
    </div>
  );
};

The errors I'm getting are being shown when I hover over 'search=' and 'params=' in my return statement. Here are the errors: 1.) Type 'true | SearchReducer<any, Partial<any> & Omit<any, never>> | undefined' is not assignable to type 'SearchReducer<Partial<{}>, Partial<{}> & Omit<never, never>>'. Type 'undefined' is not assignable to type 'SearchReducer<Partial<{}>, Partial<{}> & Omit<never, never>>'. 2.) Type 'ParamsReducer<Record<never, string>, Partial<Record<never, string>> & Omit<Record<never, string>, never>> | undefined' is not assignable to type 'ParamsReducer<Partial<Record<never, string>> & Record<never, string>, Partial<Record<never, string>> & Partial<{}> & Omit<never, never>>'. Type 'undefined' is not assignable to type 'ParamsReducer<Partial<Record<never, string>> & Record<never, string>, Partial<Record<never, string>> & Partial<{}> & Omit<never, never>>'. How do I properly type my search and params props so that the error goes away? I know they can be undefined, even the ToOptions type acknowledges that, but for some reason my editor doesn't like that.

5 Replies