如何获取HOC的NextJS Url类型

Question

我正在组件中构造一个Link，需要接受href作为道具。然而，我在定义这种类型时遇到了问题。

import React from "react;
import Link, { LinkProps } from "next/link";
type MyComponentProps = {
href: Pick<LinkProps, "href">
}
export const MyComponent: React.FC<MyComponentProps> = ({ href }) => (
<Link href={href}>
<a>Some Link Text</a>
</Link>
);

我收到一个类型错误：

Type 'Pick<InternalLinkProps, "href">' is not assignable to type 'UrlObject'.
Types of property 'href' are incompatible.
Type 'Url' is not assignable to type 'string | null | undefined'.
Type 'UrlObject' is not assignable to type 'string'.ts(2322)
link.d.ts(6, 5): The expected type comes from property 'href' which is declared here on type 'IntrinsicAttributes & { css?: Interpolation<Theme>; } & Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof InternalLinkProps> & InternalLinkProps & { ...; } & RefAttributes<...>'

如何在此Components道具中定义href的类型？

我看到了这个资源，但它对没有帮助

Answer 1

Pick在这里不起作用，因为Pick<LinkProps, "href">将返回一个包含链接属性的对象，而不仅仅是值

我想你只想要LinkProps["href"]，但你也可以使用这些：

type ComponentProps = Pick<LinkProps, "href">
type ComponentProps = Pick<LinkProps, "href"> & { ... otherProps}