Custom children type with TypeScript 4.1

[michalbundyra]

I am trying to create "extension" of breadcrumbs with specific type of children.
I was able to do it, and all was working fine with TypeScript 3.9.7 and it looks like it works also with 4.0 but not with 4.1.

I am not sure if the issue is with material-ui, TypeScript or my implementation, but I assume it might be material-ui compatibility issue, as it works fine with TypeScript 3.9 and 4.0.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When using with TypeScript 4.1.2 I am getting the following errors:

Errors on line 72:

Type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)> | ReactElement<...>[]' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>'.
  Type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>[]' is missing the following properties from type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>': type, props, key(2322)

Error on line 73:

Type 'undefined' is not assignable to type 'ReactElement<any, string | ((props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<any, any, any>)>'.(2322)

(this line was always a hack for me.... without it does not work, but with all works as expected, not sure what's wrong here, but this is not the main point of that issue report)

Expected Behavior 🤔

No errors, and works as on TypeScript 3.9 and 4.0.

Steps to Reproduce 🕹

• https://codesandbox.io/s/serene-shadow-r48e0?file=/src/App.tsx
• TypeScript Playground

It's pretty hard to replicate it correctly as CodeSandbox does not support TypeScript 4.1 and Playground is not fully functional either, but we are getting there the same issues I get on local.

So on Playground with TypeScript 4.1.2 I am getting errors on lines 72 and 73. When I switch to 4.0.5 or 3.9.7 I am not getting there errors and all works as expected.

On CodeSandbox I am just showing what I am trying to do - all works, as we can't really choose TypeScript 4.1 for the complier.

Steps:

1. Open Playground
2. Check lines 72-73
3. Change TypeScript version
4. Check again lines 72-73
5. Errors on these lines are expected only on TypeScript 4.1.2+

Context 🔦

As said before, small extension so I can have "base breadcrumb" for some pages and restricted children to the certain type.

Your Environment 🌎

Tech	Version
Material-UI	v4.11.1
React	16.14.0 / 17.0.1
Browser	Chrome/Safari
TypeScript	4.1.2

Note: If you think it is an issue with TypeScript, not with Material-UI itself, please let me know, so I'll report it to TypeScript. Thanks.

[eps1lon]

You're trying to assign { children: Array<undefined | ReactElement> } to { children: | ReactElement<BreadcrumbLinkProps>[] | ReactElement<BreadcrumbLinkProps> | undefined }.

Your BreadcrumbsProps do not declare that they can handle with items that are undefined but you're passing them in <Breadcrumbs>{}{undefined}</Breadcrumbs>.

And then you're recursively passing it in <Breadcrumbs>{props.children}</Breadcrumbs>.

This is neither an issue with TypeScript nor Material-UI. React.Children.map could narrow the item a bit but that's an issue for @types/react