Next.js React TS中Apryse WebViewer重复实例错误求助

问题根源 #

该错误是由于WebViewer被多次初始化到同一个DOM元素上导致的，常见于React组件重复渲染、未正确清理实例的场景，在Next.js App Router的客户端组件中更容易触发这类问题。

修复方案 #

修改wordeditor.tsx，添加实例清理逻辑和初始化状态标记，确保WebViewer仅被创建一次：

"use client";
import { useEffect, useRef } from "react";
import WebViewer from "@pdftron/webviewer";

const licenseKey = "";

const WordEditor = () => {
  const viewerDiv = useRef<any>(null);
  const instanceRef = useRef<any>(null);
  const isInitialized = useRef(false);

  useEffect(() => {
    // 阻止重复初始化
    if (isInitialized.current) return;
    isInitialized.current = true;

    const initWebViewer = async () => {
      const instance = await WebViewer(
        {
          path: "/webviewer/lib",
          licenseKey: licenseKey,
          initialDoc: "https://pdftron.s3.amazonaws.com/downloads/pl/legal-contract.docx",
          enableOfficeEditing: true,
        },
        viewerDiv.current
      );
      instanceRef.current = instance;
      const { documentViewer } = instance.Core;
      // 此处可添加业务逻辑
    };

    initWebViewer();

    // 组件卸载时清理实例
    return () => {
      if (instanceRef.current) {
        instanceRef.current.Core.documentViewer.dispose();
        instanceRef.current = null;
        isInitialized.current = false;
      }
    };
  }, []);

  return (
    <div className="webviewer" ref={viewerDiv} style={{ height: "100%" }}></div>
  );
};

export default WordEditor;

额外验证项 #

• 确认page.tsx中仅调用一次<WebViewer />组件，避免重复渲染。
• 检查Next.js路由配置，防止页面被意外重复挂载（比如布局组件中嵌套了目标页面）。
• 确保/webviewer/lib路径正确，WebViewer静态资源已放置在public目录下。

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