Tengo un problema para entender esta interfaz.

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

Este es el tipo de componente

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

Este es mi componente dinámico:

 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> ); };

Mi problema aparece aquí:

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

Dentro del content puede haber más que solo _uid: string component: TComp _editable?: string

Puede haber, por ejemplo, un size que sea una cadena. Puedo definir el nombre de la clave. También puede ser una matriz de StoryData como grid: StoryData[] por ejemplo.

El error aparece en el componente Props at my 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)

¿Cómo soluciono este error?