PnP Modern Search扩展中MGT Person组件重复注册问题求助

核心问题分析 #

你遇到的问题是MGT组件重复注册冲突——PnP Modern Search本身可能已内置了MGT库，你的扩展库又单独引入了一份，导致自定义元素重复注册错误；同时无数据显示可能是参数格式不匹配或权限问题。

具体解决方案 #

1. 避免MGT库重复打包（推荐方案） #

修改扩展库的Webpack配置，让其复用PnP Modern Search已加载的MGT模块，不打包自己的副本：

• 打开config/webpack.config.js，在externals节点中添加MGT相关依赖：

externals: {
  // 适配SPFx的组件加载机制，复用宿主环境的MGT模块
  "@microsoft/mgt-react": "var window.SPComponentLoader._loadedModules['@microsoft/mgt-react']",
  "@microsoft/mgt-element": "var window.SPComponentLoader._loadedModules['@microsoft/mgt-element']",
  "@microsoft/mgt-components": "var window.SPComponentLoader._loadedModules['@microsoft/mgt-components']"
}

• 修改后重新编译、打包并部署，即可解决重复注册错误。

2. 修正Person组件的参数传递 #

搜索结果的CreatedBy通常是包含用户信息的对象，需确保传入MGT的参数格式正确：

• 如果使用personQuery，需传入用户的UPN、邮箱或ID：

<div className="newsSubTitle">
  <Person 
    personQuery={CreatedBy.UserPrincipalName || CreatedBy.Email} 
    view={ViewType.oneline}
  ></Person>
</div>

• 或直接使用personDetails传入完整用户对象（v3版本支持）：

<div className="newsSubTitle">
  <Person 
    personDetails={CreatedBy} 
    view={ViewType.oneline}
  ></Person>
</div>

3. 检查Graph权限配置 #

MGT Person组件需要调用Microsoft Graph获取用户头像和资料，需确保：

• SharePoint站点已授予Web部件User.Read.All应用权限（通过Azure AD管理门户配置）
• 若使用用户上下文，当前用户需有读取其他用户资料的权限

应急方案：手动注销重复组件（不推荐长期使用） #

如果上述配置暂时无法生效，可在组件初始化前手动注销已注册的MGT元素：

import { ComponentsHelper } from '@microsoft/mgt-element';
import { useEffect } from 'react';

// 在组件内部添加useEffect钩子
useEffect(() => {
  // 检查并注销已注册的mgt-person组件
  if (customElements.get('mgt-person')) {
    ComponentsHelper.unregisterComponent('person');
  }
}, []);

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