在NextJs中使用动态导入类型类型/ NextJs定义类型有困难

Question

我已经构建了一个组件，它使用next/dynamic导入react-在必要时导入图标，但我找不到为该组件定义类型记录类型的正确方法。组件本身可以工作。

下面是带有类型记录的代码框的链接：https://codesandbox.io/s/nextjs-dynamic-import-with-react-icons-zk1kz9

代码:

import dynamic from "next/dynamic";

const DynamicIcon = ({
  iconFamily,
  icon,
  ...rest
}: {
  iconFamily: keyof typeof Icons;
  icon: string;
}) => {
  const Icons = {
    ci: dynamic(() => import("react-icons/ci").then((mod) => mod[icon])),
    fa: dynamic(() => import("react-icons/fa").then((mod) => mod[icon])),
    io: dynamic(() => import("react-icons/io").then((mod) => mod[icon])),
    io5: dynamic(() => import("react-icons/io5").then((mod) => mod[icon])),
    md: dynamic(() => import("react-icons/md").then((mod) => mod[icon])),
    ti: dynamic(() => import("react-icons/ti").then((mod) => mod[icon])),
    go: dynamic(() => import("react-icons/go").then((mod) => mod[icon])),
    fi: dynamic(() => import("react-icons/fi").then((mod) => mod[icon])),
    gi: dynamic(() => import("react-icons/gi").then((mod) => mod[icon])),
    wi: dynamic(() => import("react-icons/wi").then((mod) => mod[icon])),
    di: dynamic(() => import("react-icons/di").then((mod) => mod[icon])),
    ai: dynamic(() => import("react-icons/ai").then((mod) => mod[icon])),
    bs: dynamic(() => import("react-icons/bs").then((mod) => mod[icon])),
    ri: dynamic(() => import("react-icons/ri").then((mod) => mod[icon])),
    fc: dynamic(() => import("react-icons/fc").then((mod) => mod[icon])),
    gr: dynamic(() => import("react-icons/gr").then((mod) => mod[icon])),
    hi: dynamic(() => import("react-icons/hi").then((mod) => mod[icon])),
    hi2: dynamic(() => import("react-icons/hi2").then((mod) => mod[icon])),
    si: dynamic(() => import("react-icons/si").then((mod) => mod[icon])),
    sl: dynamic(() => import("react-icons/sl").then((mod) => mod[icon])),
    im: dynamic(() => import("react-icons/im").then((mod) => mod[icon])),
    bi: dynamic(() => import("react-icons/bi").then((mod) => mod[icon])),
    cg: dynamic(() => import("react-icons/cg").then((mod) => mod[icon])),
    vsc: dynamic(() => import("react-icons/vsc").then((mod) => mod[icon])),
    tb: dynamic(() => import("react-icons/tb").then((mod) => mod[icon])),
    tfi: dynamic(() => import("react-icons/tfi").then((mod) => mod[icon]))
  };

  const Icon = iconFamily && icon ? Icons[iconFamily] : null;

  if (!Icon) return <></>;

  return (
    <>
      <Icon {...rest} />
    </>
  );
};

export default DynamicIcon;

错误:

./components/DynamicIcon.tsx:12:17
Type error: Argument of type '() => Promise<typeof import("/sandbox/node_modules/react-icons/ci/index") | IconType | undefined>' is not assignable to parameter of type 'DynamicOptions<IconBaseProps> | Loader<IconBaseProps>'.
  Type '() => Promise<typeof import("/sandbox/node_modules/react-icons/ci/index") | IconType | undefined>' is not assignable to type '() => LoaderComponent<IconBaseProps>'.
    Type 'Promise<typeof import("/sandbox/node_modules/react-icons/ci/index") | IconType | undefined>' is not assignable to type 'LoaderComponent<IconBaseProps>'.
      Type 'typeof import("/sandbox/node_modules/react-icons/ci/index") |IconType | undefined' is not assignable to type 'ComponentType<IconBaseProps> | { default: ComponentType<IconBaseProps>; }'.
        Type 'undefined' is not assignable to type 'ComponentType<IconBaseProps> | { default: ComponentType<IconBaseProps>; }'.

我尝试了多种定义类型的方法(字符串、IconType类型的键等)

Answer 1

我认为问题是你要在这里返回Promise。

ci: dynamic(async () => {
    const mod=await import("react-icons/ci")
    return mod[icon]    
)
})

另外，您将icon作为字符串传递，但是这个字符串值应该是react-library导出的值。也许您应该为icon类型定义一个Enum