SPFX React应用中如何通过PeoplePicker获取用户部门与手机号

你当前拿不到手机号和部门，是因为@pnp/spfx-controls-react的PeoplePicker组件默认只返回用户的基础信息（id、loginName、displayName等），mobilePhone和Department不在默认返回的字段集合里，必须通过SharePoint REST API额外获取用户的完整属性。

解决步骤： #

1. 将handleChange改为异步函数，适配REST API的异步调用特性
2. 对每个选中的用户，调用SP REST API获取MobilePhone（手机号）和Department（部门）字段
3. 组装包含完整信息的用户对象并传递给onValueChange

修改后的代码示例： #

import * as React from 'react';
import * as PropTypes from 'prop-types';
import { PeoplePicker, PrincipalType, IPersonaProps } from "@pnp/spfx-controls-react/lib/PeoplePicker";
import { SPHttpClient } from '@microsoft/sp-http';

const PersonGroupPicker = ({props, onValueChange}) =>{

// 改为async函数处理异步请求
const handleChange = async (items: IPersonaProps[]) => {
    let selectedUsers : any[] = [];
    
    // 遍历选中用户，逐个获取详细信息
    for (const item of items) {
        try {
            // 编码loginName，处理特殊字符避免API调用失败
            const encodedLoginName = encodeURIComponent(item.loginName);
            // 调用SP REST API获取指定字段
            const response = await props.context.spHttpClient.get(
                `${props.context.pageContext.web.absoluteUrl}/_api/web/getuserbyloginnam(@v)?@v='${encodedLoginName}'&$select=MobilePhone,Department`,
                SPHttpClient.configurations.v1
            );

            if (response.ok) {
                const userDetails = await response.json();
                // 组装包含完整信息的用户对象
                selectedUsers.push({
                    id: item.id,
                    email: item.loginName.replace("i:0#.f|membership|",""),
                    displayName: item.text,
                    mobilePhone: userDetails.MobilePhone,
                    department: userDetails.Department
                });
            }
        } catch (error) {
            console.error('获取用户详细信息失败:', error);
            // 失败时保留基础信息，避免流程中断
            selectedUsers.push({
                id: item.id,
                email: item.loginName.replace("i:0#.f|membership|",""),
                displayName: item.text,
                mobilePhone: undefined,
                department: undefined
            });
        }
    }

    console.log("完整用户信息:", selectedUsers);
    onValueChange(selectedUsers);
};

return <PeoplePicker
            context={props.context}
            titleText={props.title}
            personSelectionLimit={props.maxPerson}
            groupName={props.groupName ? props.groupName : ""}
            showtooltip={props.tooltip == undefined ? true : props.tooltip}
            required={props.required == undefined ? false : props.required}
            disabled={props.disabled == undefined ? false : props.disabled}
            onChange={handleChange}
            showHiddenInUI={props.showHidden == undefined ? true : props.showHidden}
            principalTypes={props.principalType ? props.principalType : [PrincipalType.User]}
            resolveDelay={props.resolveDelay == undefined ? 1000 : props.resolveDelay}
            errorMessage={props.error ? props.error : ""}
            placeholder={props.placeholder ? props.placeholder : ""}
            tooltipMessage={props.tooltipMessage ? props.tooltipMessage : ""}
            defaultSelectedUsers={props.defaultSelectedUsers && props.defaultSelectedUsers.length ? props.defaultSelectedUsers : []}
            ensureUser={true}
        />;
};


PersonGroupPicker.propTypes = {
props: PropTypes.shape({
    context: PropTypes.any.isRequired, 
    title: PropTypes.string.isRequired,
    maxPerson: PropTypes.number.isRequired,
    groupName: PropTypes.string,
    tooltip: PropTypes.bool,
    required: PropTypes.bool,
    disabled: PropTypes.bool,
    showHidden: PropTypes.bool,
    principalType: PropTypes.arrayOf(PropTypes.number),
    resolveDelay: PropTypes.number,
    error: PropTypes.string,
    placeholder: PropTypes.string,
    tooltipMessage: PropTypes.string,
    defaultSelectedUsers: PropTypes.arrayOf(PropTypes.string)
  }),
onValueChange: PropTypes.func.isRequired
};

export default PersonGroupPicker;

关键说明： #

• SharePoint REST API返回的标准字段名是**MobilePhone（手机号）和Department**（部门），注意首字母大写
• 必须对loginName做encodeURIComponent编码，否则特殊字符会导致API请求报错
• 用async/await确保所有用户信息获取完成后再执行后续逻辑
• 添加错误处理，避免单个用户信息获取失败导致整个流程中断

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