Type 'OverridableComponent<LinkTypeMap<{}, "a">>' is not assignable-CodePudding

I am working in a project where I have a component called ListItemTextStyle in that component prop type is defined like this

import {
  LinkProps,
  ListItemButtonProps,
} from '@mui/material';


type IProps = LinkProps & ListItemButtonProps;

interface ListItemStyleProps extends IProps {
  component?: ReactNode;
  to?: string;
  activeRoot?: boolean;
  activeSub?: boolean;
  subItem?: boolean;
}

component type is ReactNode

This worked fine until we fully upgrade the packages to the latest versions. Including MUI, react, react-scripts and typescript. Now I am getting this error where I pass the Link component (MUI) as the component prop.

<ListItemStyle component={Link} href={path} target="_blank" rel="noopener">
      {renderContent}
    </ListItemStyle>

Type 'OverridableComponent<LinkTypeMap<{}, "a">>' is not assignable to type 'ReactNode'.

Then I tried to add a workaround like this

 <ListItemStyle component={Link as ReactNode} href={path} target="_blank" rel="noopener">
      {renderContent}
    </ListItemStyle>

Now I am getting a different error

Conversion of type 'OverridableComponent<LinkTypeMap<{}, "a">>' to type 'ReactNode' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.

How do I fix this using typescript?

CodePudding user response：

component?: ReactNode;

If this is the correct type, then you need to change your code so that you pass in an element instead of a component. For example:

<ListItemStyle component={<Link />} // ...

Alternatively, if component={Link} is the correct code, then you need to change the type to:

import { ComponentType } from 'react';
// ...
component?: ComponentType