Type 'undefined' is not assignable to type 'ReactElement | null'.ts(2322)报错原因及解决方法

umi 项目，基于 React + TypeScript ，今天同事遇到一个问题，ts 报错如下：

Type 'Element | undefined' is not assignable to type 'ReactElement<any, any> | null'.
    Type 'undefined' is not assignable to type 'ReactElement<any, any> | null'.ts(2322)

很显然，React 组件要求 return 一个 Element 元素，代码在此前写了一个空的 return ，所以就报这个错误了。

举个例子：

const IndexPage: React.FC<{}> = (props) => {
  return (
    <div>
    </div>
  );
};
export default IndexPage;

上面这样写，没有问题吧。

但如果这样写，就会报错了：

const IndexPage: React.FC<{}> = (props) => {
  const data = undefined;
  if (!data) {
    return;
  }
  return (
    <div>
    </div>
  );
};
export default IndexPage;

React 规定 return 一个元素，这里 return 了一个 undefiend 。

未经允许不得转载：前端资源网 - w3h5 » Type 'undefined' is not assignable to type 'ReactElement | null'.ts(2322)报错原因及解决方法