React+TypeScript报错：类型'()=>string|JSX.Element'无法赋值给'FC<{}>'

核心原因 #

React.FC（函数组件类型）要求组件返回值必须是JSX.Element或null，但你的代码在error分支直接返回了字符串，导致返回类型变成string | JSX.Element，和FC的类型要求不匹配，触发了类型错误。

修复步骤 #

把错误字符串包裹在JSX元素里，比如<div>：

if (error) return <div>Error! {error.message}</div>;

额外优化建议 #

• 给useState显式指定类型，避免隐式any：

  // 先定义Pizza类型接口
  interface Pizza {
    id: string;
    name: string;
    // 按需添加其他字段
  }
  // 初始化空数组，同时指定类型
  const [pizzas, setPizzas] = React.useState<Pizza[]>([]);
  

• 给useQuery的返回数据指定类型，让类型检查更严格：

  const { loading, error, data } = useQuery<Pizza[]>(GET_PIZZAS);
  

修改后的完整代码示例 #

import React from 'react';
import { useQuery } from '@apollo/client';
import { Container } from '@mui/material';
import useStyles from './styles';
import PageHeader from './PageHeader';

interface Pizza {
  id: string;
  name: string;
}

const Pizzas: React.FC = () => {
  const classes = useStyles();
  const [pizzas, setPizzas] = React.useState<Pizza[]>([]);
  const { loading, error, data } = useQuery<Pizza[]>(GET_PIZZAS);

  if (loading) {
    return <div className={classes.skeleton}>Loading ...</div>;
  }

  if (error) return <div>Error! {error.message}</div>;

  console.log("Data: ", data);

  return (
    <Container maxWidth="md">
      <PageHeader pageHeader={'Under construction'} />
      <img alt="under-construction" src="./codingcat.jpeg" />
    </Container>
  );
};

export default Pizzas;

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