not assignable to type 'IntrinsicAttributes & ContentOutlineProps & ContentBrainstormProps&#039-CodePudding

I have this page with a <SideBar /> component which dynamically renders different component using setActivePage hook. However, I am getting the following typescript error on the indicated line:

const Content: (({ question_blocks, }: ContentBrainstormProps) => JSX.Element) | (({ outline_blocks }: ContentOutlineProps) => JSX.Element) | (() => JSX.Element)
----------------------------------------------------------------------------------------
Type '{ question_blocks: QuestionBlock[]; } | { outline_blocks: OutlineBlock[]; } | {}' is not assignable to type 'IntrinsicAttributes & ContentBrainstormProps & ContentOutlineProps'.

  Property 'outline_blocks' is missing in type '{ question_blocks: QuestionBlock[]; }' but required in type 'ContentOutlineProps'.ts(2322)

ContentOutline.tsx(7, 3): 'outline_blocks' is declared here.

const Draft = () => {
  const [draftData, setDraftData] = useState<Document>(defaultDraftData);
  const [activePage, setActivePage] = useState<
    'One' | 'Two' | 'Three'
  >('One');

  const contents = {
    Brainstorm: {
      Content: ContentBrainstorm,
      props: { question_blocks: draftData.question_blocks }, // question_blocks: QuestionBlock[]
    },
    Outline: {
      Content: ContentOutline,
      props: { outline_blocks: draftData.outline_blocks }, // outline_blocks" OutlineBlock[]
    },
    Write: {
      Content: ContentWrite,
      props: {},
    },
  };

  const { Content, props } = contents[activePage];

  useEffect(() => {
      axios.get(apiRoute)
        .then(function (response) {
          setDraftData(response.data);
        });
    }
  }, []);

  return (
      <div className="bg-offwhite flex flex-col">
        <SideBar activePage={activePage} setActivePage={setActivePage} />
        <LayoutApp>
          <Header header={title} draftId={draftId} />


          <Content {...props} /> // <-----ERROR HERE----->


        </LayoutApp>
        <UtilBar />
      </div>
  );
};

ContentOutline.tsx

type ContentOutlineProps = {
  outline_blocks: OutlineBlock[];
};

export const ContentOutline = ({ outline_blocks }: ContentOutlineProps) => (
  <LayoutContent>
    <HeaderText text="Step 2: Organize your ideas and arguments into different paragraphs" />
    <OutlineCardList outline_blocks={outline_blocks} />
  </LayoutContent>
);

CodePudding user response：

Define the types ContentOutlineProps, ContentBrainstormProps as following

type ContentOutlineProps = {
  outline_blocks?: OutlineBlock[];
  question_blocks?: OutlineBlock[];
};
type ContentBrainstorm = {
  outline_blocks?: OutlineBlock[];
  question_blocks?: OutlineBlock[];
};