"解释通用类型"

Question

我在理解这个界面时遇到了问题

export interface StoryData<Content = StoryblokComponent<string> & { [index: string]: any }> {
  ...
  content: Content
  ...
}

这是组件类型

export interface StoryblokComponent<TComp extends string> {
  _uid: string
  component: TComp
  _editable?: string
}

这是我的动态组件：

import { StoryData } from "storyblok-js-client";
import { components } from "../config/componentRegister";
export const DynamicComponent: React.FC<StoryData> = ({
  content,
}: StoryData) => {
  if (typeof components[content.component] !== "undefined") {
    const Component = components[content.component];

    return <Component content={content} />;
  }
  // fallback if the component doesn't exist
  return (
    <p>
      The component <strong>{content.component}</strong> has not been created
      yet.
    </p>
  );
};

我的问题出现在这里：

export const Page: React.FC<StoryData> = ({
  content,
}: StoryData<StoryData>) => {
  let { grid } = content;
  return (
    <div {...sbEditable(content)}>
      {grid?.map((childContent) => (
        <DynamicComponent content={childContent} />
      ))}
    </div>
  );
};

在content内部可以有更多的只是_uid: string component: TComp _editable?: string

可以有例如size的女巫是一个字符串。 我可以定义密钥的名称。 它也可以是 StoryData 数组，例如grid: StoryData[] 。

错误出现在我的Page组件的道具中

Type '({ content }: StoryData) => void' is not assignable to type 'FC<StoryData<StoryblokComponent<string> & { [index: string]: any; }>>'.
  Type 'void' is not assignable to type 'ReactElement<any, any>'.ts(2322)

我该如何解决这个错误？