Next.js中ZAFClient.init()无法使用，求解决方法

问题原因 #

你遇到的ReferenceError: ZAFClient is not defined，是因为Next.js的<Script>组件默认采用异步加载策略，而你的useEffect在组件挂载后立即执行，此时Zendesk ZAF SDK脚本还未加载完成，全局变量ZAFClient还不存在。

解决方案 #

方案1：利用Script组件的onLoad回调标记加载状态 #

通过onLoad回调确认SDK加载完成后，再执行相关API调用逻辑：

import { Script, useEffect, useState } from 'next/script';

export default function ZendeskAppComponent() {
  const [isZafReady, setIsZafReady] = useState(false);

  useEffect(() => {
    if (isZafReady) {
      getRequester();
    }
  }, [isZafReady]);

  const getRequester = async () => {
    console.log("indexjs getRequester");
    const client = ZAFClient.init();
    client.invoke("resize", { width: "100%", height: "600px" });
    const ticketData = await client.get("ticket");
    // 处理获取到的工单数据
    console.log('工单信息:', ticketData);
  };

  return (
    <div>
      <Script
        type="text/javascript"
        src="https://static.zdassets.com/zendesk_app_framework_sdk/2.0/zaf_sdk.min.js"
        onLoad={() => setIsZafReady(true)}
      />
      {/* 你的组件内容 */}
    </div>
  );
}

方案2：直接在onLoad中执行SDK逻辑 #

如果不需要在组件其他地方复用SDK实例，可以直接把API调用写在onLoad回调里：

import { Script } from 'next/script';

export default function ZendeskAppComponent() {
  return (
    <div>
      <Script
        type="text/javascript"
        src="https://static.zdassets.com/zendesk_app_framework_sdk/2.0/zaf_sdk.min.js"
        onLoad={() => {
          const client = ZAFClient.init();
          client.invoke("resize", { width: "100%", height: "600px" });
          client.get("ticket").then(ticketData => {
            console.log('工单信息:', ticketData);
            // 处理数据逻辑
          });
        }}
      />
      {/* 你的组件内容 */}
    </div>
  );
}

方案3：全局预加载SDK（推荐用于全页面依赖的场景） #

如果你的整个应用都依赖ZAF SDK，可以在_app.js中使用strategy="beforeInteractive"加载脚本，这样脚本会在页面交互前完成加载，子组件中可以直接使用ZAFClient：

// pages/_app.js
import { Script } from 'next/script';

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Script
        type="text/javascript"
        src="https://static.zdassets.com/zendesk_app_framework_sdk/2.0/zaf_sdk.min.js"
        strategy="beforeInteractive"
      />
      <Component {...pageProps} />
    </>
  );
}

此时你的业务组件可以直接在useEffect中调用SDK：

import { useEffect } from 'react';

export default function ZendeskAppComponent() {
  useEffect(() => {
    getRequester();
  }, []);

  const getRequester = async () => {
    const client = ZAFClient.init();
    client.invoke("resize", { width: "100%", height: "600px" });
    const ticketData = await client.get("ticket");
    console.log('工单信息:', ticketData);
  };

  return <div>你的组件内容</div>;
}

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