SPFX解决方案中从列表取数据遇404错误，求问题排查

核心错误：硬编码的列表ID #

你的RequestSHP.tsx里的getAreas方法存在致命错误——你使用了字符串字面量'listID'而非传入的参数listId：

// 错误写法
return await sp.web.lists.getById('listID').items.get();

// 正确写法
return await sp.web.lists.getById(listId).items.get();

这会导致请求始终指向ID为listID的不存在列表，直接触发404错误。

其他需要排查的点 #

• SP初始化是否完成：确保在调用PnP方法前已完成SP初始化，比如在WebPart的onInit方法中执行：

  protected async onInit(): Promise<void> {
    await super.onInit();
    sp.setup({
      spfxContext: this.context
    });
  }
  

• 列表ID格式有效性：确认props.selectListPobocka传入的是标准GUID格式的列表ID（如"550d60a5-1c1b-4818-9f85-xxxxxxxxx"），而非列表名称或错误格式的字符串。
• 权限验证：当前WebPart上下文用户是否拥有目标列表的读取权限，部分场景下SharePoint会用404隐藏权限不足问题。
• 返回类型匹配：WebPart.ts中getAreas方法声明返回Promise<string[]>，但实际返回的是列表项对象数组，建议修改为Promise<any[]>或定义对应列表项接口，避免类型错误。

修正后的RequestSHP.tsx代码 #

import {sp} from '@pnp/sp/presets/all';

export default class RequestSHP {
  public async getAreas(listId: string) {
    console.log(listId);
    try {
        return await sp.web.lists.getById(listId).items.get();
    }
    catch (error) {
        throw (`Cannot request [${listId}] -> [${String(error)}]`);
    }
  }
}

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