React+Azure AD+TypeScript实现SSO时遇类型赋值错误求助

错误提示 #

Type '{ msalInstance: PublicClientApplication; environment: Environment.Browser; }' is not assignable to type 'IntrinsicAttributes & Props'.
Property 'msalInstance' does not exist on type 'IntrinsicAttributes & Props'.

相关代码 #

render.tsx #

import React from 'react';
import ReactDOM from 'react-dom/client';
import { App } from './App';
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
import reportWebVitals from './reportWebVitals';
import { Environment } from '../types';
import { PublicClientApplication } from '@azure/msal-browser';

interface PcaProps {
  msalInstance: string;
}

const pca = new PublicClientApplication({
  auth: {
    clientId: '...-...-...-...',
    authority: 'https://login.microsoftonline.com/.......',
    redirectUri: '/',
  }
})

function render() {
  const rootElement = document.getElementById('app-root');
  if (!rootElement) throw new Error('Failed to find the root element');

  const root = ReactDOM.createRoot(rootElement);

  root.render(
    <React.StrictMode>
      <App msalInstance={pca} environment={Environment.Browser} />
    </React.StrictMode>,
  );

  serviceWorkerRegistration.unregister();
  reportWebVitals();
}

export { render };

App.tsx #

import React from 'react';
import { Providers } from './providers';
import { Routing } from './Routing'; 

import type { FC } from 'react';
import type { Environment } from '../types'; 

interface Props {
  environment: Environment;
}

const App: FC<Props> = ({ environment }) => (
  <Providers environment={environment}>
    <Routing />
  </Providers>
);

export { App };

问题原因与修复方案 #

问题核心 #

你在render.tsx中给<App>组件传递了msalInstance属性，但App.tsx里定义的Props接口并没有声明这个属性。另外，render.tsx里的PcaProps接口完全没用，还错误地把msalInstance的类型设成了string（实际是PublicClientApplication实例）。

修复步骤 #

1. 更新App.tsx的Props接口：添加msalInstance属性，并指定正确的类型
2. 传递msalInstance到子组件：把msalInstance传给需要它的Providers组件（SSO逻辑通常在Provider层处理）
3. 删除无用代码：移除render.tsx里的PcaProps接口

修改后的App.tsx

import React from 'react';
import { Providers } from './providers';
import { Routing } from './Routing'; 

import type { FC } from 'react';
import type { Environment } from '../types';
import type { PublicClientApplication } from '@azure/msal-browser'; // 导入正确类型

interface Props {
  environment: Environment;
  msalInstance: PublicClientApplication; // 添加msalInstance属性
}

const App: FC<Props> = ({ environment, msalInstance }) => (
  <Providers environment={environment} msalInstance={msalInstance}> {/* 传递给Providers */}
    <Routing />
  </Providers>
);

export { App };

修改后的render.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { App } from './App';
import * as serviceWorkerRegistration from './serviceWorkerRegistration';
import reportWebVitals from './reportWebVitals';
import { Environment } from '../types';
import { PublicClientApplication } from '@azure/msal-browser';

const pca = new PublicClientApplication({
  auth: {
    clientId: '...-...-...-...',
    authority: 'https://login.microsoftonline.com/.......',
    redirectUri: '/',
  }
})

function render() {
  const rootElement = document.getElementById('app-root');
  if (!rootElement) throw new Error('Failed to find the root element');

  const root = ReactDOM.createRoot(rootElement);

  root.render(
    <React.StrictMode>
      <App msalInstance={pca} environment={Environment.Browser} />
    </React.StrictMode>,
  );

  serviceWorkerRegistration.unregister();
  reportWebVitals();
}

export { render };

额外提示 #

最后要确保Providers组件也声明并接收msalInstance属性，这样才能在里面使用MSAL实例处理SSO逻辑（比如初始化MsalProvider组件，如果你用@azure/msal-react库的话）。

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