React类组件继承引发TypeScript类型不兼容错误求助

问题背景 #

明确使用React类API，定义了抽象类Gallery，子类AdmonitionBlockGallery继承自它，但使用时出现TypeScript编译错误。

抽象类Gallery代码 #

import React from "react";

abstract class Gallery<PartialsFlags extends Readonly<{ [key: string]: boolean | undefined; }>>
  extends React.Component<Gallery.Properties<PartialsFlags>>
{
  protected get mustRenderAllPartials(): boolean {
    return Object.values(this.props.partialsFlags).every((value: boolean | undefined): boolean => value === true);
  }
}

namespace Gallery {
  export type Properties<PartialsFlags extends Readonly<{ [key: string]: boolean | undefined; }>> = Readonly<{
    mustVisuallyHideTopHeading: boolean;
    mustVisuallyHideAllHeadings: boolean;
    partialsFlags: PartialsFlags;
  }>;
}

子类AdmonitionBlockGallery代码 #

class AdmonitionBlockGallery extends Gallery<AdmonitionBlockGallery.PartialsFlags> {
  public render(): React.ReactNode {
    return <></>;
  }
}

namespace AdmonitionBlockGallery {
  export type PartialsFlags = Readonly<{
    minimal: boolean;
    titles: boolean;
    // ...etc.
  }>;
}

错误信息 #

TS2786: AdmonitionBlockGallery cannot be used as a JSX component.

  Its type typeof AdmonitionBlockGallery is not a valid JSX element type.

    Type 'typeof AdmonitionBlockGallery' is not assignable to type 'new (props: any, deprecatedLegacyContext?: any) => Component<any, any, any>'.

      Construct signature return types AdmonitionBlockGallery and Component<any, any, any> are incompatible.

        The types returned by render() are incompatible between these types.

           Type React.ReactNode is not assignable to type
import("D:/***Frontend/FrameworksIntegrations/React/Package/node_modules/@types/react/index").ReactNode

             Type

               ReactElement<any, string | JSXElementConstructor<any>>

                 is not assignable to type ReactNode

                   Property children is missing in type

                     ReactElement<any, string | JSXElementConstructor<any>>

                        but required in type ReactPortal

解决方案 #

核心原因 #

错误本质是项目中存在多个版本的@types/react，导致ReactNode类型来自不同的模块实例，引发类型不兼容。

具体修复步骤 #

1. 统一@types/react版本
   检查package.json中@types/react的版本，确保所有依赖（包括间接依赖）使用相同版本。可通过npm ls @types/react查看版本树，排查冲突。

2. 清理依赖并重新安装
   删除node_modules和锁文件后重新安装：

   rm -rf node_modules package-lock.json
   npm install
   

3. 调整render方法返回类型
   显式指定更具体的返回类型，避免类型歧义：

   // 方案1：返回null
   public render(): React.ReactElement | null {
     return null;
   }
   
   // 方案2：返回空片段并指定为ReactElement
   public render(): React.ReactElement {
     return <></>;
   }
   

4. 检查tsconfig配置
   确认tsconfig.json的compilerOptions中，baseUrl和paths没有错误映射React的类型路径，确保TypeScript正确解析单一的@types/react实例。

内容的提问来源于stack exchange，提问作者Takeshi Tokugawa YD