React 18升级后react-aad-msal组件出现TS2322类型错误

问题原因 #

React 18升级后，旧版react-aad-msal的类型定义未适配React 18的组件子元素规范，导致函数式children无法被TypeScript类型系统识别。

解决方案 #

• 升级react-aad-msal到兼容版本
  旧版本包的类型定义缺失children属性声明，直接升级到适配React 18的最新版：

  npm install react-aad-msal@latest
  

  升级后重新检查类型是否正常。

• 手动扩展类型定义（临时方案）
  若暂时无法升级包，在项目中新增类型声明文件（如src/types/react-aad-msal.d.ts），补充children属性的类型：

  import { IAzureADProps, IAzureADFunctionProps } from 'react-aad-msal';
  
  declare module 'react-aad-msal' {
    interface IAzureADProps {
      children?: (props: IAzureADFunctionProps) => React.ReactNode;
    }
  }
  

  保存后TypeScript会自动识别该扩展类型。

• 改用高阶组件写法
  放弃<AzureAD>组件的函数子元素用法，使用withAzureAD高阶组件包裹目标组件：

  import { withAzureAD } from 'react-aad-msal';
  
  const AppContent = ({ login, authenticationState, error, accountInfo }) => {
    // 原组件逻辑
    return (
      <ConnectedRouter history={history}>
        <ThemeProvider theme={theme}>
          {/* 页面内容 */}
        </ThemeProvider>
      </ConnectedRouter>
    );
  };
  
  export default withAzureAD({
    provider: authProvider,
    reduxStore: store,
    forceLogin: true
  })(AppContent);
  

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