部署的SPFx Web Part控制台报错，非本地工作台正常，求解决方案

我来帮你搞定这个头疼的404问题！核心原因是sp-pnp-js没有正确关联SPFx的上下文，导致API请求的站点路径推断错误。下面一步步来修复：

一、正确配置sp-pnp-js（关键步骤） #

你之前误以为onInit是Angular的方法，其实它是SPFx Web Part的生命周期方法，必须在这里初始化pnp的上下文，才能让pnp获取正确的站点URL。

步骤1：确保安装sp-pnp-js #

如果还没安装，先在项目根目录执行：

npm install sp-pnp-js --save

步骤2：在Web Part类中重写onInit方法 #

在你的Web Part的.ts文件中，添加如下代码（替换成你的Web Part类名）：

import * as pnp from "sp-pnp-js";
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';

export default class IncidentReportWebPart extends BaseClientSideWebPart<IIncidentReportWebPartProps> {
  // 重写onInit，初始化pnp上下文
  public onInit(): Promise<void> {
    return super.onInit().then(() => {
      // 将SPFx的上下文传递给pnp，这是核心！
      pnp.setup({
        spfxContext: this.context
      });
    });
  }

  // 你的其他Web Part方法（比如_getUser、_getDepartments等）放在这里
}

二、修复你的三个功能代码（优化+错误捕获） #

配置好上下文后，原来的代码逻辑是对的，但建议改成async/await写法，同时添加错误捕获，方便排查问题：

1. 获取当前用户功能 #

public async _getUser() {
  try {
    const user = await pnp.web.currentUser.get();
    this.setState({
      CurrentUserTitle: user.Title,
      FullName: user.Title,
      CurrentUser: user.LoginName,
      CurrentUserID: user.Id,
      CurrentUserEmail: user.Email
    });
  } catch (error) {
    console.error("获取当前用户失败:", error);
  }
}

2. 加载Departments列表下拉框 #

public async _getDepartments() {
  try {
    const items = await pnp.web.lists.getByTitle("Departments").items.get();
    const returnedDepts: IDropdownOption[] = items.map((item) => ({
      key: item.Title,
      text: item.Title
    }));
    this.setState({ DepartmentsList: returnedDepts });
  } catch (error) {
    console.error("加载部门列表失败:", error);
  }
}

3. 表单提交按钮功能 #

优化成async/await链式调用，避免嵌套的then回调：

private async _onSubmit() {
  try {
    // 1. 添加新表单项
    const iar = await pnp.web.lists.getByTitle('Data and Report Form').items.add({
      FullName: this.state.FullName,
      UniId: this.state.UniId,
      Email: this.state.UserEmail,
      Phone: this.state.PhoneNo,
      Department: this.state.SelectedDept,
      SubDepartment: this.state.SubDepartment,
      StartDate: this.state.StartDate,
      DiscoveryDate: this.state.DateOfDiscovery,
      Details: this.state.IncidentDetails,
      PersonalData: this.state.PersonalData
    });

    // 2. 更新Title字段为DIBR+ID
    await pnp.web.lists.getByTitle('Data and Report Form').items.getById(iar.data.Id).update({
      Title: `DIBR${iar.data.Id}`
    });

    // 3. 更新状态
    this.setState({ JobRef: iar.data.Id });
    console.log("表单提交成功:", iar);
  } catch (error) {
    console.error("表单提交失败:", error);
  }
}

三、为什么之前会出现404？ #

当没有配置spfxContext时，pnp会从当前页面的URL自动推断站点路径，这在本地工作台（workbench.aspx）里是正常的，但部署到实际站点后：

• 添加到SitePages页面时，pnp错误地把SitePages当成了站点的一部分，导致请求URL变成https://myDomain.sharepoint.com/sites/IncidentReporting/SitePages/_api/web/currentuser，而正确路径应该是https://myDomain.sharepoint.com/sites/IncidentReporting/_api/web/currentuser
• 添加到现代首页时，pnp又缺失了站点名称，导致请求URL变成https://MyDomain.sharepoint.com/sites/_api/...，少了IncidentReporting

配置spfxContext后，pnp会直接从SPFx上下文里获取正确的站点绝对URL，所有API请求路径都会自动修正。

四、验证修复效果 #

1. 重新打包部署Web Part：

   gulp bundle --ship
   gulp package-solution --ship
   

2. 把生成的.sppkg文件上传到你的App Catalog，部署到目标站点集
3. 将Web Part添加到SitePages页面或首页，打开浏览器控制台查看API请求的URL是否正确，同时测试三个功能是否正常

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