Type 'string | undefined' is not assignable to type 'Url'.

[JHunnicutt]

Summary

I have created a custom component that I want to use the Link component inside of. In the interface for my component, I have an optional href property that takes a string. When I add the Link component, I have a type error on herf saying:

Type 'string | undefined' is not assignable to type 'Url'.

I'm not sure how to get that particular type or where it comes from. Is anyone able to illuminate me on this?

Thanks!

Additional information

interface ButtonDefinition extends AriaButtonProps, intentProps, sizeProps {
	className: string
	element: 'button' | 'div' | 'a'
	href?: string
}

function Button({ intent, size, element, ...props }: ButtonDefinition) {
	const ref = useRef(null)
	const { buttonProps } = useButton({ ...props, elementType: element }, ref)
	const { children } = props

	switch (element) {
		case 'button':
			return (
				<button
					{...buttonProps}
					ref={ref}
					className={cvaButton({ intent, size, ...props })}
				>
					{children}
				</button>
			)
		case 'a':
			return (
				<Link
					href={props.href}
					{...buttonProps}
					ref={ref}
					className={cvaButton({ intent, size, ...props })}
				>
					{children}
				</Link>
			)
	}
}
``

Example

No response

[icyJoseph]

Hi,

In this case, I think the problem is with that, what you are trying to achieve, is not reflected in the type signatures correctly.

For completeness sake, specifically, for that error message, you have to narrow out the undefined possibility, for example:

 case "a":
      if (typeof props.href === "string") {
        return (
          <Link
            href={props.href}
            //   {...buttonProps}
            ref={ref}
            //   className={cvaButton({ intent, size, ...props })}
          >
            {children}
          </Link>
        );
      }

      return null;

// or

 case "a":
      if (typeof props.href !== "string") return null;
      return (
          <Link
            href={props.href}
            //   {...buttonProps}
            ref={ref}
            //   className={cvaButton({ intent, size, ...props })}
          >
            {children}
          </Link>
        );
      }

That's probably not fully what you want to do. I reckon, you want to make sure, that as far as the consumers of this component, are concerned, the href must be a string, when case "a" applies.

For example:

import { ReactNode, useRef } from "react";

import Link from "next/link";

interface AnchorDefinition {
  element: "a";
  href: string;
}

interface SimpleDefinition {
  element: "button" | "div";
  href: never;
}

type ButtonDefinition = {
  className: string;
  children?: ReactNode;
} & (AnchorDefinition | SimpleDefinition);

export function Button({ element, ...props }: ButtonDefinition) {
  const ref = useRef(null);
  const { children } = props;

  switch (element) {
    case "button":
      return (
        <button
          //   {...buttonProps}
          ref={ref}
          //   className={cvaButton({ intent, size, ...props })}
        >
          {children}
        </button>
      );
    case "a":
      return (
        <Link
          href={props.href}
          //   {...buttonProps}
          ref={ref}
          //   className={cvaButton({ intent, size, ...props })}
        >
          {children}
        </Link>
      );
  }
}

And now, when the element is a, the href prop is already required to be a string.

I've commented out parts that I had no access to.

Also, you don't seem to be handling the "div" case

[LeoDivine]

So I came across this issue. This is the solution:
<Link href={link ?? "#"}></Link

[icyJoseph]

That happens to silence TypeScript, but it is still not correct.

[LeoDivine]

As long as it solves the problem and does not create build errors...