SPFx属性面板中PropertyFieldCollectionData的PeoplePicker无法检索用户

问题场景 #

在SPFx属性面板中使用PropertyFieldCollectionData组件嵌套PeoplePicker时，搜索用户无任何结果，无法找到目标账号。

相关代码 #

导入代码

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { Version } from '@microsoft/sp-core-library';
import {
  IPropertyPaneConfiguration,
  IPropertyPaneDropdownOption,
  PropertyPaneTextField
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart, WebPartContext } from '@microsoft/sp-webpart-base';
import * as strings from 'FaqProjectWebPartStrings';
import FaqProject from './components/FaqProject';
import { IFaqProjectProps } from './components/FaqProject';
import { PropertyFieldListPicker, PropertyFieldListPickerOrderBy } from '@pnp/spfx-property-controls/lib/PropertyFieldListPicker';
import { IPropertyFieldGroupOrPerson, PropertyFieldDropdownWithCallout, PropertyFieldPeoplePicker } from '@pnp/spfx-property-controls';
import { CalloutTriggers } from '@pnp/spfx-property-controls/lib/PropertyFieldHeader';
import { PropertyFieldToggleWithCallout } from '@pnp/spfx-property-controls/lib/PropertyFieldToggleWithCallout';
import { PropertyFieldCollectionData, CustomCollectionFieldType } from '@pnp/spfx-property-controls/lib/PropertyFieldCollectionData';   
import { PeoplePicker, PrincipalType } from '@pnp/spfx-controls-react/lib/PeoplePicker';

属性面板配置代码

PropertyFieldCollectionData("collectionData", {
  key: "collectionData",
  label: "Collection data",
  panelHeader: "Collection data panel header",
  manageBtnLabel: "Manage collection data",
  value: this.properties.collectionData,
  fields: [
    {
      id: "Title",
      title: "Name",
      type: CustomCollectionFieldType.string,
      required: true
    },
    {
      id: "Group",
      title: "Choose a group",
      type: CustomCollectionFieldType.custom,
      onCustomRender: (field, value, onUpdate, item, itemId, onError) => {
        return (
          React.createElement(PeoplePicker, {
            context: this.context as any ,
            personSelectionLimit: 1,
            showtooltip: true,
            key: itemId,
            defaultSelectedUsers: [item.customFieldId],
            onChange: (items: any[]) => {
              console.log("Items", items);
              item.customFieldId = items[0].secondaryText;
              onUpdate(field.id, items[0].secondaryText);
            },
            showHiddenInUI: false,
            principalTypes: [PrincipalType.User]
          })
        )
      },
    },
  ],
  disabled: false
}),

属性定义

export interface IFaqProjectWebPartProps {
  description: string;
  faqListId: string;
  categoryListId: string;
  subCategoryListId: string;
  panelViewToggle: boolean;
  people: IPropertyFieldGroupOrPerson[];
  collectionData: any[];  
}

问题原因 #

1. 默认选中用户配置错误：defaultSelectedUsers使用了未定义的item.customFieldId，而实际字段值存储在item[field.id]（即item.Group）中，导致初始化逻辑异常，影响搜索功能。
2. 数据更新逻辑不匹配：字段ID为Group，但更新时修改的是item.customFieldId，导致属性面板数据存储混乱，无法正确关联字段值。
3. 上下文类型转换风险：this.context as any可能破坏上下文对象的API结构，导致PeoplePicker无法正常调用用户搜索接口。

修复后的代码 #

修改PropertyFieldCollectionData中的自定义字段渲染逻辑：

{
  id: "Group",
  title: "Choose a group",
  type: CustomCollectionFieldType.custom,
  onCustomRender: (field, value, onUpdate, item, itemId, onError) => {
    return (
      React.createElement(PeoplePicker, {
        context: this.context,
        personSelectionLimit: 1,
        showtooltip: true,
        key: itemId,
        // 使用当前字段的value作为默认选中用户
        defaultSelectedUsers: value ? [value] : [],
        onChange: (items: any[]) => {
          if (items.length > 0) {
            // 存储用户登录名（或根据需求替换为用户ID）
            const selectedUser = items[0].loginName;
            item[field.id] = selectedUser;
            onUpdate(field.id, selectedUser);
          } else {
            // 清空选择
            item[field.id] = "";
            onUpdate(field.id, "");
          }
        },
        showHiddenInUI: false,
        principalTypes: [PrincipalType.User],
        // 可选：设置搜索延迟，避免频繁请求
        resolveDelay: 300
      })
    )
  },
}

额外说明 #

• 若需存储用户ID而非登录名，可将items[0].loginName替换为items[0].id，同时确保defaultSelectedUsers传入ID数组。
• 确认WebPart已配置User.Read的Graph API权限（在package-solution.json中声明），否则无法正常获取用户数据。
• 测试时确保当前用户有权限访问SharePoint用户信息列表，避免权限不足导致搜索失败。

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