为何我的代码无法从SharePoint站点获取列表？

问题概述 #

通过SPFx Adaptive Card Extension代码从SharePoint站点获取列表数据时，列表内容未加载到响应中，代码其余功能正常，已确认serve.json中站点URL和列表名称配置正确。

原代码 #

import { IPropertyPaneConfiguration } from '@microsoft/sp-property-pane';
import { BaseAdaptiveCardExtension } from '@microsoft/sp-adaptive-card-extension-base';
import { CardView } from './cardView/CardView';
import { QuickView } from './quickView/QuickView';
import { HelloWorldPropertyPane } from './HelloWorldPropertyPane';
import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';

export interface IHelloWorldAdaptiveCardExtensionProps {
  title: string;
  description: string;
  iconproperty: string;
  targetlist: string;
}

export interface IHelloWorldAdaptiveCardExtensionState {
  description: string;
  items:IListItem[];
}
export interface IListItem{
  EmployeeName:string;
  City:string;
  ContactNumber:string;
  BaseLocation:string;
}

const CARD_VIEW_REGISTRY_ID: string = 'HelloWorld_CARD_VIEW';
export const QUICK_VIEW_REGISTRY_ID: string = 'HelloWorld_QUICK_VIEW';

export default class HelloWorldAdaptiveCardExtension extends BaseAdaptiveCardExtension<
  IHelloWorldAdaptiveCardExtensionProps,
  IHelloWorldAdaptiveCardExtensionState
> {
  private _deferredPropertyPane: HelloWorldPropertyPane | undefined;

  public onInit(): Promise<void> {
    this.state = {
      description:this.properties.description,
      items:[]
    };

    this.cardNavigator.register(CARD_VIEW_REGISTRY_ID, () => new CardView());
    this.quickViewNavigator.register(QUICK_VIEW_REGISTRY_ID, () => new QuickView());

    setTimeout(this.loadSpoData,500);
    return Promise.resolve();
  }

  public get title():string{
    return this.properties.title;
  }

  private loadSpoData=async(): Promise<void>=>{
    if(this.properties.targetlist){
      this.context.spHttpClient.get(
        `${this.context.pageContext.web.absoluteUrl}/_api/lists/GetByTitle('MyCompanyEmployeeList')/items`,
        SPHttpClient.configurations.v1)
        .then((response:SPHttpClientResponse)=>{
          response.json().then((responseJSON:any)=>{
            const items:IListItem[]=(<any[]>(responseJSON.value))
            .map<IListItem>((v:{EmployeeName:string;City:string;ContactNumber:string;BaseLocation:string;}): IListItem=>{
              return{
                EmployeeName:v.EmployeeName,
                City: v.City,
                ContactNumber: v.ContactNumber,
                BaseLocation: v.BaseLocation
              };
            });

            this.setState({
              items:items
            });
          });
        });
    }
  }

  protected loadPropertyPaneResources(): Promise<void> {
    return import(
      /* webpackChunkName: 'HelloWorld-property-pane'*/
      './HelloWorldPropertyPane'
    )
      .then(
        (component) => {
          this._deferredPropertyPane = new component.HelloWorldPropertyPane();
        }
      );
  }

  protected renderCard(): string | undefined {
    return CARD_VIEW_REGISTRY_ID;
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return this._deferredPropertyPane?.getPropertyPaneConfiguration();
  }
}

排查与修复方案 #

1. 硬编码列表名称未使用配置值 #

代码中硬写了列表名称MyCompanyEmployeeList，但属性定义了targetlist参数却未利用，若配置的列表名称与硬编码值不一致会导致请求错误。修改为动态读取配置：

`${this.context.pageContext.web.absoluteUrl}/_api/lists/GetByTitle('${this.properties.targetlist}')/items`

2. 未处理HTTP错误响应 #

当前代码仅处理成功响应，未捕获404（列表不存在）、403（权限不足）等错误，添加错误排查逻辑：

this.context.spHttpClient.get(
  `${this.context.pageContext.web.absoluteUrl}/_api/lists/GetByTitle('${this.properties.targetlist}')/items`,
  SPHttpClient.configurations.v1
)
.then((response: SPHttpClientResponse) => {
  if (!response.ok) {
    throw new Error(`请求失败，状态码: ${response.status}`);
  }
  return response.json();
})
.then((responseJSON: any) => {
  // 原有数据处理逻辑
})
.catch(error => {
  console.error('加载列表数据失败:', error);
});

3. 字段内部名称不匹配 #

SharePoint列表字段的内部名称可能与显示名称不同（如空格会被替换为_x0020_），需确认EmployeeName等字段的内部名称是否正确。可通过以下API查看字段信息：

{站点URL}/_api/lists/GetByTitle('{列表名称}')/fields?$select=Title,InternalName

4. 权限验证 #

确认当前用户对目标列表拥有读取权限，开发环境可查看浏览器控制台是否有403权限错误提示。

5. 异步执行逻辑优化 #

使用setTimeout依赖延迟执行存在不确定性，建议直接在onInit中异步调用数据加载方法：

public async onInit(): Promise<void> {
  this.state = {
    description: this.properties.description,
    items: []
  };

  this.cardNavigator.register(CARD_VIEW_REGISTRY_ID, () => new CardView());
  this.quickViewNavigator.register(QUICK_VIEW_REGISTRY_ID, () => new QuickView());

  await this.loadSpoData();
  return Promise.resolve();
}

6. 调试建议 #

在浏览器控制台添加断点，查看responseJSON的具体返回内容，确认是否有数据返回，或是否存在字段名称不匹配的情况。

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