使用PnPjs/sp获取SharePoint视图列表项时出现URL构造错误

问题原因 #

你遇到的TypeError: Failed to construct 'URL': Invalid URL错误，核心原因是初始化spfi时没有指定SharePoint网站的基础URL。PnP JS需要明确的网站根URL来构建后续请求的完整地址，否则会因为缺少基础路径导致URL构造失败。

修复步骤 #

1. 初始化spfi时传入网站基础URL
   修改你的SP初始化代码，将SharePoint网站的完整URL传入spfi()：

   try {
       // 替换为你的SharePoint网站实际URL
       const siteUrl = "https://your-tenant.sharepoint.com/sites/your-site";
       const sp = spfi(siteUrl).using(DefaultInit(), DefaultHeaders(), BrowserFetchWithRetry(), DefaultParse());
       const list = sp.web.lists.getByTitle(ListName);
       const listView = await list.views.getByTitle(ViewName).select("ViewQuery")();
       const xml = '<View><Query>' + listView.ViewQuery + '</Query></View>';
       const items = await list.getItemsByCAMLQuery({'ViewXml' : xml});
       return items;
   } catch (err){
       console.log(err);
       return undefined;
   }
   

2. 额外检查项

   • 确认ListName和ViewName是正确的字符串，没有拼写错误、空格或者空值
   • 如果是在SPFx项目中，可以通过上下文自动获取网站URL：const sp = spfi(this.context.pageContext.web.absoluteUrl).using(...);
   • 验证网站URL是否可以正常访问，确保没有权限或者网络问题

补充说明 #

即使你看到视图的相对URL正常，PnP JS在没有基础URL的情况下，无法将相对路径拼接成完整的请求URL，因此必须在初始化时提供完整的网站地址。

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