我正在为我的 SharePoint 租户开发 Web 部件。当我在工作台上测试我的解决方案时，一切都运行良好。但是当我将其放在我的 SharePoint Online 上时，我收到描述中描述的错误。

这是我的包：

  "packages": {
    "": {
      "name": "gallery_photo",
      "version": "0.0.1",
      "dependencies": {
        "@fluentui/react": "^8.104.6",
        "@fluentui/react-components": "^9.11.1",
        "@fluentui/react-hooks": "^8.6.15",
        "@microsoft/sp-core-library": "1.16.1",
        "@microsoft/sp-lodash-subset": "1.16.1",
        "@microsoft/sp-odata-types": "^1.16.1",
        "@microsoft/sp-office-ui-fabric-core": "1.16.1",
        "@microsoft/sp-property-pane": "1.16.1",
        "@microsoft/sp-webpart-base": "1.16.1",
        "@pnp/graph": "^3.11.0",
        "@pnp/logging": "^3.11.0",
        "@pnp/pnpjs": "^2.15.0",
        "@pnp/sp": "^3.11.0",
        "@pnp/spfx-controls-react": "3.12.0",
        "@pnp/spfx-property-controls": "3.11.0",
        "@reach/dialog": "^0.18.0",
        "@uifabric/utilities": "^7.38.2",
        "office-ui-fabric-react": "^7.199.1",
        "react": "17.0.1",
        "react-dom": "17.0.1",
        "tslib": "2.3.1",
        "uuid": "^9.0.0"
      },
      "devDependencies": {
        "@fullhuman/postcss-purgecss": "^5.0.0",
        "@microsoft/eslint-config-spfx": "1.16.1",
        "@microsoft/eslint-plugin-spfx": "1.16.1",
        "@microsoft/rush-stack-compiler-4.5": "0.2.2",
        "@microsoft/sp-build-web": "1.16.1",
        "@microsoft/sp-module-interfaces": "1.16.1",
        "@rushstack/eslint-config": "2.5.1",
        "@types/react": "17.0.45",
        "@types/react-dom": "17.0.17",
        "@types/webpack-env": "~1.15.2",
        "@typescript-eslint/eslint-plugin": "^5.0.0",
        "@typescript-eslint/parser": "^5.0.0",
        "ajv": "^6.12.5",
        "autoprefixer": "^9.8.6",
        "eslint": "^8.7.0",
        "eslint-plugin-react-hooks": "4.3.0",
        "gulp": "4.0.2",
        "gulp-postcss": "^9.0.1",
        "postcss": "^8.4.21",
        "postcss-cli": "^10.1.0",
        "postcss-import": "^15.1.0",
        "tailwindcss": "^1.9.6",
        "typescript": "4.5.5"
      },
      "engines": {
        "node": ">=16.13.0 <17.0.0"
      }
    },

这是我的代码：

import * as React from "react";
import * as ReactDom from "react-dom";
import { Version } from "@microsoft/sp-core-library";
import {
  IPropertyPaneConfiguration,
  PropertyPaneDropdown,
  IPropertyPaneDropdownOption,
  PropertyPaneChoiceGroup,
} from "@microsoft/sp-property-pane";

import { BaseClientSideWebPart } from "@microsoft/sp-webpart-base";
import { IReadonlyTheme } from "@microsoft/sp-component-base";
import "@pnp/sp/folders";
import * as strings from "CascadingWebPartStrings";
import Cascading from "./components/Cascading";
import { SPHttpClient, SPHttpClientResponse } from "@microsoft/sp-http";
import "@pnp/sp/fields";
import { getSP } from "../../FilesConfig";
import { SPFI } from "@pnp/sp";
import { IDateTimeFieldValue } from "@pnp/spfx-property-controls/lib/PropertyFieldDateTimePicker";

export interface ICascadingWebPartProps {
  datetime: IDateTimeFieldValue;
  description: string;
  listName: string;
  folderName: string;
  metaData: string;
  Order: string;
}

export default class CascadingWebPart extends BaseClientSideWebPart<ICascadingWebPartProps> {
  private _isDarkTheme: boolean = false;
  private _environmentMessage: Promise<string>;
  private lists: IPropertyPaneDropdownOption[];
  private listsDropdownDisabled: boolean = true;
  private folders: IPropertyPaneDropdownOption[];
  private foldersDropdownDisabled: boolean = true;
  private metaData: IPropertyPaneDropdownOption[] = [
    { key: "Title", text: "Titre" },
    { key: "TimeCreated", text: "Date de création" },
    { key: "TimeLastModified", text: "Date de modification" },
  ];
  private _sp: SPFI;

  public render(): void {
    const Element = (): React.ReactElement => {
      return (
        <Cascading
          metaData={this.properties.metaData}
          description={this.properties.description}
          isDarkTheme={this._isDarkTheme}
          environmentMessage={this._environmentMessage}
          hasTeamsContext={!!this.context.sdks.microsoftTeams}
          userDisplayName={this.context.pageContext.user.displayName}
          listName={this.properties.listName}
          folderName={this.properties.folderName}
          Order={this.properties.Order}
          context={this.context}
        />
      );
    };

    ReactDom.render(<Element />, this.domElement);
  }

  protected async onInit(): Promise<void> {
    this._environmentMessage = this._getEnvironmentMessage();
    await super.onInit();
    getSP(this.context);
  }

  private _getEnvironmentMessage(): Promise<string> {
    if (!!this.context.sdks.microsoftTeams) {
      // running in Teams, office.com or Outlook
      return this.context.sdks.microsoftTeams.teamsJs.app
        .getContext()
        .then((context) => {
          let environmentMessage: string = "";
          switch (context.app.host.name) {
            case "Office": // running in Office
              environmentMessage = this.context.isServedFromLocalhost
                ? strings.AppLocalEnvironmentOffice
                : strings.AppOfficeEnvironment;
              break;
            case "Outlook": // running in Outlook
              environmentMessage = this.context.isServedFromLocalhost
                ? strings.AppLocalEnvironmentOutlook
                : strings.AppOutlookEnvironment;
              break;
            case "Teams": // running in Teams
              environmentMessage = this.context.isServedFromLocalhost
                ? strings.AppLocalEnvironmentTeams
                : strings.AppTeamsTabEnvironment;
              break;
            default:
              throw new Error("Unknown host");
          }

          return environmentMessage;
        });
    }

    return Promise.resolve(
      this.context.isServedFromLocalhost
        ? strings.AppLocalEnvironmentSharePoint
        : strings.AppSharePointEnvironment
    );
  }

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

    this._isDarkTheme = !!currentTheme.isInverted;
    const { semanticColors } = currentTheme;

    if (semanticColors) {
      this.domElement.style.setProperty(
        "--bodyText",
        semanticColors.bodyText || null
      );
      this.domElement.style.setProperty("--link", semanticColors.link || null);
      this.domElement.style.setProperty(
        "--linkHovered",
        semanticColors.linkHovered || null
      );
    }
  }

  protected onDispose(): void {
    ReactDom.unmountComponentAtNode(this.domElement);
  }

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

  private loadLists(): Promise<IPropertyPaneDropdownOption[]> {
    const restAPiUrl: string = `${this.context.pageContext.web.absoluteUrl}/_api/web/lists`;
    const listTitles: IPropertyPaneDropdownOption[] = [];

    return new Promise<IPropertyPaneDropdownOption[]>(
      (
        resolve: (options: IPropertyPaneDropdownOption[]) => void,
        reject: (error: ErrorCallback) => void
      ) => {
        this.context.spHttpClient
          .get(restAPiUrl, SPHttpClient.configurations.v1)
          .then((response: SPHttpClientResponse) => {
            response.json().then((results) => {
              results.value
                .filter(
                  (result: { Hidden: boolean }) => result.Hidden === false
                )
                .map((result: { Title: string }) => {
                  listTitles.push({
                    key: result.Title,
                    text: result.Title,
                  });
                });
              // JSON.parse(JSON.stringify(listTitles));
              resolve(listTitles);
            });
          })
          .catch((err) => {
            reject(err);
          });
      }
    );
  }
  private loadFolders(): Promise<IPropertyPaneDropdownOption[]> {
    return new Promise<IPropertyPaneDropdownOption[]>((resolve, reject) => {
      try {
        this._sp = getSP();

        console.log(this.properties.listName);

        const folderList: IPropertyPaneDropdownOption[] = [];
        console.log("folderlist", folderList);
        const folder = this._sp.web.lists
          .getByTitle(this.properties.listName)
          .rootFolder.folders.filter(
            "Name ne 'Forms' and Name ne 'Attachments'"
          )();

        folder.then((item) => {
          console.log(item);
          if (item.length > 0) {
            item.map(({ Name }) => {
              folderList.push({
                key: Name,
                text: Name,
              });
            });
            console.log(JSON.parse(JSON.stringify(folderList)));
            resolve(folderList);
          } else {
            folderList.push({
              key: "None",
              text: "Aucun dossier disponible",
            });
            resolve(folderList);
          }
        });
      } catch (err) {
        console.log(err);
        reject(err);
      }
    });
  }

  protected onPropertyPaneConfigurationStart(): void {
    this.listsDropdownDisabled = !this.lists;
    this.foldersDropdownDisabled = !this.properties.listName || !this.folders;

    if (this.lists) {
      console.log("pas d'init");
      return;
    }

    this.context.statusRenderer.displayLoadingIndicator(
      this.domElement,
      "options"
    );

    this.loadLists()
      .then(
        (
          listOptions: IPropertyPaneDropdownOption[]
        ): Promise<IPropertyPaneDropdownOption[]> => {
          this.lists = listOptions;
          this.listsDropdownDisabled = false;
          this.context.propertyPane.refresh();
          return this.loadFolders();
        }
      )
      .then((folderOptions: IPropertyPaneDropdownOption[]): void => {
        this.folders = folderOptions;
        this.foldersDropdownDisabled = !this.properties.listName;
        this.context.propertyPane.refresh();
        this.context.statusRenderer.clearLoadingIndicator(this.domElement);
        this.render();
      });
  }

  protected onPropertyPaneFieldChanged(
    propertyPath: string,
    oldValue: string,
    newValue: string
  ): void {
    if (propertyPath === "listName" && newValue) {
      console.log("changed");
      // push new list value
      super.onPropertyPaneFieldChanged(propertyPath, oldValue, newValue);
      // get previously selected item
      const previousItem: string = this.properties.folderName;
      // reset selected item
      this.properties.folderName = undefined;
      this.properties.metaData = undefined;
      // push new item value
      this.onPropertyPaneFieldChanged(
        "folderName",
        previousItem,
        this.properties.folderName
      );
      // disable item selector until new items are loaded
      this.foldersDropdownDisabled = true;
      // refresh the item selector control by repainting the property pane
      this.context.propertyPane.refresh();
      // communicate loading items
      this.context.statusRenderer.displayLoadingIndicator(
        this.domElement,
        "folder"
      );

      this.loadFolders().then(
        (folderOptions: IPropertyPaneDropdownOption[]): void => {
          // store items
          this.folders = folderOptions;
          console.log("itemoptions: ", this.folders);
          // enable item selector
          this.foldersDropdownDisabled = false;
          this.context.propertyPane.refresh();
          // clear status indicator
          this.context.statusRenderer.clearLoadingIndicator(this.domElement);
          // refresh the item selector control by repainting the property pane
          this.context.propertyPane.refresh();
          // re-render the web part as clearing the loading indicator removes the web part body
          this.render();
        }
      );
    } else {
      super.onPropertyPaneFieldChanged(propertyPath, oldValue, newValue);
    }
  }

  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription,
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneDropdown("listName", {
                  label: strings.DescriptionFieldLabel,
                  options: this.lists,
                  disabled: this.listsDropdownDisabled,
                }),
                PropertyPaneDropdown("folderName", {
                  label: strings.FolderFieldLabel,
                  selectedKey: null,
                  options: this.folders,
                  disabled: this.foldersDropdownDisabled,
                }),
                PropertyPaneDropdown("metaData", {
                  label: strings.MetaDataFieldLabel,
                  selectedKey: null,
                  options: this.metaData,
                  disabled: this.foldersDropdownDisabled,
                }),
                PropertyPaneChoiceGroup("Order", {
                  label: strings.OrderFieldLabel,
                  options: [
                    { key: "true", text: "ASC" },
                    { key: "false", text: "DESC" },
                  ],
                }),
              ],
            },
          ],
        },
      ],
    };
  }
}

我和他有同样的问题，但我没有看到他的解决方案： TypeError：使用 sp pnp v3 时无法读取未定义的属性（读取“pageContext”）

你能帮帮我吗？

我尝试了几乎所有的配置，并使用旧版本进行测试，但没有任何帮助。