为什么Material-UI v4自定义Snackbar过渡会出现children类型不兼容报错

Material-UI v4的Slide过渡组件限定children属性只能是ReactElement类型或undefined，但SnackbarProvider传递给过渡组件的props中children类型为更宽泛的ReactNode（包含null、字符串、数字等非React元素类型），二者类型不匹配触发ts报错。

下面是3种可行的修复方式：

• 方案1：添加类型断言快速修复
  直接对children做类型断言，明确告知TypeScript传入的children符合Slide组件的类型要求，代码如下：

  import React, { forwardRef } from 'react';
  import { Slide, SlideProps } from '@material-ui/core';
  import { SnackbarProvider } from 'notistack';
  
  <SnackbarProvider
    maxSnack={3}
    TransitionComponent={forwardRef<HTMLDivElement, SlideProps>(function Transition(
      props,
      ref
    ) {
      return <Slide direction="up" ref={ref} {...props} children={props.children as React.ReactElement} />
    })}
  >
  

• 方案2：添加类型守卫保证类型安全
  先校验children是否为合法React元素再传递，避免类型断言带来的运行时风险，代码如下：

  TransitionComponent={forwardRef(function Transition(
    props,
    ref
  ) {
    const { children, ...restProps } = props;
    if (!React.isValidElement(children)) return null;
    return <Slide direction="up" ref={ref} {...restProps}>{children}</Slide>
  })}
  

• 方案3：对整个过渡组件做类型断言
  适合临时快速修复，无需修改组件内部逻辑，代码如下：

  TransitionComponent={React.forwardRef(function Transition(
    props,
    ref
  ) {
    return <Slide direction="up" ref={ref} {...props} />
  }) as React.ElementType}
  

内容的提问来源于stack exchange，提问作者Shah