使用React.FC定义组件时出现ts(2322)类型不匹配错误如何解决？

问题根因 #

你写的箭头函数使用了花括号{}包裹逻辑，但没有显式返回JSX元素，导致函数返回值是void，不符合React.FC要求的返回ReactElement | null的类型约束，所以触发TS2322报错。
你之前见到的同类写法没报错，大概率是两种情况：要么用了不带花括号的箭头函数隐式返回，要么花括号内部写了return语句。

修复方案 #

方案1：添加显式return语句 #

在花括号内返回JSX元素：

import React, { FC } from 'react';

const Dashboard: FC = () => {
    return (
        <div>

        </div>
    )
};

export default Dashboard;

方案2：使用箭头函数隐式返回 #

去掉花括号，用小括号（无复杂逻辑时也可以省略小括号）包裹JSX，直接隐式返回：

import React, { FC } from 'react';

const Dashboard: FC = () => (
    <div>

    </div>
);

export default Dashboard;

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