如何将Teams中People Picker的值提交至独立SharePoint站点？

基于SPFx框架开发了托管在Teams中的WebPart，使用PnP People Picker实现人员选择功能，需要将选中人员信息提交至与当前Team无关联的独立SharePoint站点。
核心问题：提交SharePoint人员列时必须传入用户ID，但Teams端People Picker返回的ID与目标站点的用户ID不匹配；尝试提交loginName时，人员列不接受该格式，仅认可站点内的用户ID。

尝试的代码：

const [requestedOnBehalfId, setRequestedOnBehalfId] = useState<any>();
const [requestedOnBehalfEmail, setRequestedOnBehalfEmail] = useState<any>([]);

const _createRequest = () => {
    const request = {
        Title: title,
        Department: selectedDept,
        RequestedById: requestedOnBehalfId,
    }
    CreateLineItem(request, props.context);
};

const _changeRequestedOnBehalf = (items: any) => {
    let userTrim: string = "";
    if (items !== null && items.length > 0) {
        userTrim = items[0].loginName.replace("i:0#.f|membership|","");
        console.log(items[0].id, 'items[0].id');
        console.log(items[0], 'items[0]');
        console.log(userTrim, 'userTrim');
        setRequestedOnBehalfId(userTrim);
        // setRequestedOnBehalfEmail([userTrim]);
    } else {
        setRequestedOnBehalfId(null);
        setRequestedOnBehalfEmail(null);
    }
};

方案1：通过目标站点用户信息列表查询ID #

利用目标SharePoint站点的User Information List，通过选中用户的完整loginName查询对应站点内的用户ID，再用该ID提交数据：

import { Web } from "@pnp/sp/webs";

// 替换为你的目标站点URL
const targetSiteUrl = "https://yourtenant.sharepoint.com/sites/targetSite";

// 根据loginName查询目标站点的用户ID
const getTargetSiteUserId = async (fullLoginName: string) => {
    const targetWeb = Web(targetSiteUrl);
    const userItems = await targetWeb.lists.getByTitle("User Information List")
        .items
        .select("ID")
        .filter(`LoginName eq '${fullLoginName}'`)
        .get();
    
    return userItems.length > 0 ? userItems[0].ID : null;
};

// 修改提交方法为异步，先获取目标ID再提交
const _createRequest = async () => {
    if (!requestedOnBehalfId) return;
    
    const targetUserId = await getTargetSiteUserId(requestedOnBehalfId);
    if (targetUserId) {
        const request = {
            Title: title,
            Department: selectedDept,
            RequestedById: targetUserId,
        };
        await CreateLineItem(request, props.context);
    } else {
        console.error("目标站点中未找到该用户");
        // 可添加前端提示逻辑
    }
};

// 修改选择回调，保存完整的loginName而非截断值
const _changeRequestedOnBehalf = (items: any) => {
    if (items !== null && items.length > 0) {
        setRequestedOnBehalfId(items[0].loginName);
        setRequestedOnBehalfEmail(items[0].email);
    } else {
        setRequestedOnBehalfId(null);
        setRequestedOnBehalfEmail(null);
    }
};

方案2：通过用户邮箱/UPN直接获取站点用户ID #

如果用户邮箱与UPN一致，可直接通过邮箱查询目标站点的siteUsers资源获取ID：

import { Web } from "@pnp/sp/webs";

const targetSiteUrl = "https://yourtenant.sharepoint.com/sites/targetSite";

const getTargetSiteUserIdByEmail = async (email: string) => {
    const targetWeb = Web(targetSiteUrl);
    try {
        const user = await targetWeb.siteUsers.getByEmail(email)();
        return user.Id;
    } catch (err) {
        console.error("查询用户失败:", err);
        return null;
    }
};

// 在提交方法中调用
const _createRequest = async () => {
    if (!requestedOnBehalfEmail) return;
    
    const targetUserId = await getTargetSiteUserIdByEmail(requestedOnBehalfEmail);
    if (targetUserId) {
        const request = {
            Title: title,
            Department: selectedDept,
            RequestedById: targetUserId,
        };
        await CreateLineItem(request, props.context);
    }
};

关键注意事项 #

• 确保WebPart已配置对目标站点的访问权限，避免跨站点请求被拦截
• 必须处理用户不存在于目标站点的异常场景，例如前端提示用户或记录日志
• 使用PnPjs时，需确保目标站点的Web实例初始化正确，可通过SPFx上下文传递站点权限

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