我想实现的是以下目标

我有一个数据库，我所有的工具都存储在那里，沿着一个蛞蝓。在pages/tool/[slug]中，我从参数中获取一个slug，并使用该slug获取工具，我还导出一个generatedMetadata，并将工具的名称作为页面的标题。
然后使用slug，例如“color-picker”，我将其转换为ColorPicker并导入正确的组件，如下所示：

const Component = dynamic(() => import(`@components/tools/${componentName}`));

因此，对于每个工具，它都在组件/工具下，得到正确的工具并渲染。
现在每个组件都是不同的，有些可能需要react钩子，有些不需要，所以我不能从页面传递任何东西。jsx，因为这将是一个混乱
我可以为每个工具创建一个页面，例如/pages/tool/color-picker，但这样效率不高，我希望有一些东西可以获取工具并发送元数据，而无需每次手动操作。

导入组件的步骤如下：

export default async function Tool({ params }) {
  const tool = await getTool(params?.slug);

  const componentName = slugToPascalCase(tool.slug);

  const Component = dynamic(() => `@components/tools/${componentName}`);

  return (
    <>
      <main className="flex flex-col w-full h-auto justify-center items-center px-4 py-16 sm:px-6 sm:py-24 lg:px-8 lg:py-32 font-poppins">
        <ToolsHeader tool={tool} />
      </main>
      <div className="w-full flex flex-col items-center justify-center gap-4 px-4 pb-6 lg:px-16">
        <Component.default />
      </div>
    </>
  );
}

出错

Click here to see error
我试着手动导入组件，它工作得很好，动态导入时发生了一些我不知道的事情。