SPFx Web部件在经典SharePoint页面无法渲染但现代页面正常的问题求助

大家好，我最近碰到一个SPFx Web部件的棘手问题，想请各位帮忙分析下：我写了一个无框架的简单Web部件，在现代SharePoint页面上能完美显示“Hello, World!”，但放到同站点的经典页面上就彻底挂了，完全渲染不出来，还抛出了一个类型错误。

环境与问题详情 #

• 运行环境：SharePoint Online
• Web部件类型：无框架SPFx客户端Web部件
• 表现差异：
  • 现代页面：正常渲染，正确显示“Hello, World!”
  • 经典页面：无法渲染，控制台抛出以下错误：

    TypeError: Cannot read properties of null (reading 'innerHTML')
    at e.convertHtmlToWebPartData (sp-classic-page-assembly_en-us_fb10b86b7fae0a052d1ea8860a478f62.js:168:94742)
    at d._normalizeWebPartData (sp-classic-page-assembly_en-us_fb10b86b7fae0a052d1ea8860a478f62.js:169:117244)
    at d.loadWebPart (sp-classic-page-assembly_en-us_fb10b86b7fae0a052d1ea8860a478f62.js:169:115060)
    at Simple.aspx:761:37
    

已尝试的排查与修复步骤 #

我已经做了这些尝试，但问题依然存在：

• 确认目标元素存在：检查了经典页面的HTML源码，确认承载Web部件的元素确实存在
• 调整脚本执行时机：尝试用DOMContentLoaded和window.onload事件，确保脚本在DOM完全加载后再执行
• 增加空值安全检查：在访问元素属性前，专门加了判断逻辑，确保元素不为null才继续操作

我的Web部件核心代码 #

以下是我在TypeScript文件中实现的完整代码：

import { Version } from '@microsoft/sp-core-library';
import { type IPropertyPaneConfiguration, PropertyPaneTextField } from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import type { IReadonlyTheme } from '@microsoft/sp-component-base';
import styles from './SimpleWebPart.module.scss';
import * as strings from 'SimpleWebPartStrings';

export interface ISimpleWebPartProps {
  description: string;
}

export default class SimpleWebPart extends BaseClientSideWebPart<ISimpleWebPartProps> {

  public render(): void {
    this.domElement.innerHTML = `
    <div class="${styles.simple}">
      <h1>Hello, World!</h1>
    </div>`;

    window.onload = () => {
      console.log('DOM fully loaded and parsed');
      const element = this.domElement.querySelector('.simple');
      if (element) {
        console.log('Element found:', element);
        element.innerHTML = '<h1>Hello, World!</h1>';
      } else {
        console.error('Element not found');
      }
    };
  }

  protected onInit(): Promise<void> {
    return Promise.resolve();
  }

  protected onThemeChanged(currentTheme: IReadonlyTheme | undefined): void {
    if (!currentTheme) {
      return;
    }
  }

  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('description', {
                  label: strings.DescriptionFieldLabel
                })
              ]
            }
          ]
        }
      ]
    };
  }
}

我的需求 #

我希望这个Web部件能在同站点的经典页面和现代页面上都保持一致的渲染效果，正常显示“Hello, World!”。目前卡在这个类型错误上，有没有大佬能帮我找出问题根源，提供可行的解决办法？

内容来源于stack exchange