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 。

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

推荐阅读：

申请腾讯云免费SSL证书，实现网站https访问

JavaScript的引入方式和基本属性

Linux下导入SQL文件及MySQL常用命令

SQL语句的基本命令总结

Bootstrap 模态框（Modal）插件的基本应用