React TypeScript Lint报错：return后无需else，如何解决？

这个报错的核心逻辑是：第一个if块内包含return语句，一旦loading条件成立，函数会直接返回结果并退出，后续代码不会执行。因此Lint规则判定else if属于冗余语法——既然前面的分支已经通过return终止了函数，后面的分支无需用else if来做互斥判断。

修复方案 #

直接将else if改为普通if即可，同时注意修复原代码中缺失的标签闭合和函数括号：

const renderBody = () => {
    if (loading) {
      return <Skeleton variant="rect" width="100%" height={130} />;
    }
    // 移除else，改用独立if判断
    if (productListData?.length > 0) {
      return (
        <Box width="100%">
          {productListData?.map(product => (
            <ProductCollectedRow
              key={product.productId}
              patientId={patientId}
              serviceLocationGuid={serviceLocationGuid}
              product={product}
              receiptRequest={receiptRequest}
            />
          ))}
        </Box>
      );
    }
    return (
      <Box
        width="300px"
        height="150px"
        border={1}
        borderColor="grey.300"
        display="flex"
        justifyContent="center"
        alignItems="center"
      >
        No products collected yet
      </Box>
    );
};

额外说明 #

原代码存在两处语法错误：<Box>标签未闭合、函数末尾缺失闭合括号，这些问题也需要一并修复，否则会引发编译报错。

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