SPFx使用ClientsidePageFromFile加载应用页时出现sectionFactor未定义错误

问题1：能否用ClientsidePageFromFile加载应用页不触发sectionFactor错误？ #

不行。PnP JS的ClientsidePageFromFile是专门针对标准现代页面设计的，这类页面具备完整的CanvasContent1字段和{sections:[]}结构。而应用页（如单部件应用页）的页面结构完全不同，没有标准的Canvas/Section布局，不符合PnP JS的解析预期，因此直接调用必然触发错误，目前也没有官方适配方案。

问题2：可靠的回退方法检测并跳过应用页？ #

可以通过两种方式提前识别应用页：

方式一：检查页面布局类型 #

应用页的PageLayoutType属性值为SingleWebPartAppPage，标准页面通常为Article。可以先通过REST API获取页面属性判断：

const pageItem = await sp.web.getFileByServerRelativeUrl(pageUrl).getItem();
const pageLayoutType = pageItem["PageLayoutType"];

if (pageLayoutType === "SingleWebPartAppPage") {
  // 执行应用页专属处理逻辑或跳过
} else {
  // 用ClientsidePageFromFile加载标准页面
  const file = sp.web.getFileByServerRelativeUrl(pageUrl);
  const page = await ClientsidePageFromFile(file);
}

方式二：验证CanvasContent1结构 #

直接检查页面的CanvasContent1字段是否符合标准格式：

const pageItem = await sp.web.getFileByServerRelativeUrl(pageUrl).select("CanvasContent1").getItem();

if (!pageItem.CanvasContent1) {
  // 无画布内容，判定为非标准页面
} else {
  try {
    const canvasContent = JSON.parse(pageItem.CanvasContent1);
    if (!canvasContent.sections || !Array.isArray(canvasContent.sections)) {
      // 缺少sections结构，判定为应用页或特殊页面
    } else {
      // 正常加载标准页面
      const file = sp.web.getFileByServerRelativeUrl(pageUrl);
      const page = await ClientsidePageFromFile(file);
    }
  } catch (e) {
    // JSON解析失败，判定为非标准页面
  }
}

问题3：PnP JS是否官方支持读取应用页的属性？ #

目前PnP JS的clientside-pages模块没有官方支持应用页，该模块的设计目标是处理带Canvas布局的标准现代页面。应用页的WebPart数据存储结构与标准页面不同，需要手动解析。

可行解决方案：获取应用页的WebPart数据 #

应用页的WebPart数据通常存储在ClientSideApplicationProperties字段中，可直接解析该字段获取：

const pageItem = await sp.web.getFileByServerRelativeUrl(pageUrl).select("ClientSideApplicationProperties").getItem();

if (pageItem.ClientSideApplicationProperties) {
  try {
    const appProps = JSON.parse(pageItem.ClientSideApplicationProperties);
    // 应用页的WebPart数据通常在webPartData属性下
    const webPartData = appProps.webPartData;
    // 读取WebPart属性
    console.log(webPartData.properties);
  } catch (e) {
    // 处理JSON解析失败的情况
  }
}

结合错误捕获的兼容方案 #

如果不想提前检测，也可以通过捕获sectionFactor错误来触发应用页的处理逻辑：

async function loadPageAndGetWebParts(pageUrl: string) {
  try {
    const file = sp.web.getFileByServerRelativeUrl(pageUrl);
    const page = await ClientsidePageFromFile(file);
    // 处理标准页面的WebParts
    return page.webParts.map(wp => wp.properties);
  } catch (error) {
    const err = error as TypeError;
    if (err.message.includes("Cannot set properties of undefined (setting 'sectionFactor')")) {
      // 处理应用页的WebPart数据
      const pageItem = await sp.web.getFileByServerRelativeUrl(pageUrl).select("ClientSideApplicationProperties").getItem();
      if (pageItem.ClientSideApplicationProperties) {
        const appProps = JSON.parse(pageItem.ClientSideApplicationProperties);
        return [appProps.webPartData.properties];
      }
    }
    // 抛出其他非预期错误
    throw error;
  }
}

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