React17 TS2559报错：类型与IntrinsicAttributes无公共属性

多次检索同类问题未找到可行方案，React 17版本项目抛出如下TS类型错误：

packages/app/src/App.tsx:230:10 - error TS2559: Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'.

230         <ScaffolderFieldExtensions>
         ~~~~~~~~~~~~~~~~~~~~~~~~~

错误指向的代码段：

const routes = (
    <FlatRoutes>
      <Route path="/create" element={<ScaffolderPage />}>
        <ScaffolderFieldExtensions>
          <LowerCaseValuePickerFieldExtension />
        </ScaffolderFieldExtensions>
      </Route>
    </FlatRoutes>
);

后续排查发现AppProvider组件也触发相同报错，对应代码段：

const App = () => {
    return (
        <AppProvider>
          <AlertDisplay />
          <OAuthRequestDialog />
          <AppRouter>
            <SidebarPage>
              <AppSidebar/>
              {routes}
            </SidebarPage>
          </AppRouter>
        </AppProvider>
    );
};

对应报错信息：

Type '{ children: Element[]; }' has no properties in common with type 'IntrinsicAttributes'.

该错误由React 17与React 18的类型定义不兼容导致：

• React 18 对函数组件类型做了调整，所有组件默认隐式包含children属性的类型定义
• React 17 不会自动给组件注入children类型，如果组件的类型声明没有显式声明children入参，TS就会判定传入children属于非法属性，直接抛出TS2559错误
• 项目中用到的ScaffolderFieldExtensions、AppProvider均按照React 18的类型规范编写，没有显式声明children类型，在React 17环境下就会触发类型校验失败。

可根据项目实际情况选择以下任意一种方案修复：

• 方案1（零业务代码改造成本，推荐临时修复用）：在项目全局类型声明文件（通常是src/global.d.ts或react-app-env.d.ts）中添加类型补丁，统一给React函数组件补全隐式children类型：

import type { ReactNode, ReactElement } from 'react';

declare module 'react' {
  interface FunctionComponent<P = {}> {
    (props: P & { children?: ReactNode }, context?: any): ReactElement<any, any> | null;
  }
}

添加完成后重启TS服务（VSCode中可按快捷键Ctrl+Shift+P，选择TypeScript: Restart TS Server），错误即可消除。

• 方案2（无全局侵入性）：对报错组件做类型断言，绕开局部TS校验，适合不想修改全局类型的场景：
  1. 修复路由部分报错：

  const SafeFieldExtensions = ScaffolderFieldExtensions as React.FC<{children: React.ReactNode}>;
  const routes = (
      <FlatRoutes>
        <Route path="/create" element={<ScaffolderPage />}>
          <SafeFieldExtensions>
            <LowerCaseValuePickerFieldExtension />
          </SafeFieldExtensions>
        </Route>
      </FlatRoutes>
  );
  

  2. 修复AppProvider部分报错：

  const SafeAppProvider = AppProvider as React.FC<{children: React.ReactNode}>;
  const App = () => {
      return (
          <SafeAppProvider>
            <AlertDisplay />
            <OAuthRequestDialog />
            <AppRouter>
              <SidebarPage>
                <AppSidebar/>
                {routes}
              </SidebarPage>
            </AppRouter>
          </SafeAppProvider>
      );
  };
  

• 方案3（长期最优解）：将项目React版本升级到18，从根源上解决生态包类型不匹配问题，同时可兼容后续新发布的React生态组件。

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