TypeScript中调用REST API取结果及SPFx获取SharePoint页面标题问题

DevOps 小满

2026-9-25

问题原因

你的API URL的OData查询参数写错了：你写的?$Title不符合SharePoint REST API规范，正确写法是?$select=Title，这是返回null的核心原因
SharePoint REST API是异步请求，你需要用异步处理逻辑才能拿到返回值，不能直接同步return取值

推荐解决方案

SPFx内置了SPHttpClient专门用于调用SharePoint REST API，不需要依赖第三方工具类，实现代码如下：

1. 修正GetPageTitle方法为异步实现

private async GetPageTitle(): Promise<string> {
  const listTitle: string = this.props.context.pageContext.list.title;
  const pageItemId: number = this.props.context.pageContext.listItem.id;
  // 修正查询参数为?$select=Title
  const requestUrl = `${this.props.context.pageContext.web.absoluteUrl}/_api/lists/getbytitle('${listTitle}')/items(${pageItemId})?$select=Title`;

  // 调用SPFx内置SPHttpClient
  const response = await this.props.context.spHttpClient.get(
    requestUrl,
    this.props.context.spHttpClient.configurations.v1,
    {
      headers: {
        Accept: "application/json;odata=nometadata"
      }
    }
  );

  if (!response.ok) {
    throw new Error(`请求失败，状态码：${response.status}`);
  }

  const pageItem = await response.json();
  return pageItem.Title;
}

2. 调用异步方法取值

因为是异步方法，不能直接同步获取返回值，需要用await或者.then处理结果，示例如下：

// 示例：组件加载时获取页面标题并存入state
public async componentDidMount() {
  try {
    const currentPageTitle = await this.GetPageTitle();
    // 业务逻辑处理，比如存入state渲染
    this.setState({
      pageTitle: currentPageTitle
    });
  } catch (error) {
    console.error("获取页面标题出错：", error);
  }
}