Next.js中如何在独立组件调用外部引入JavaScript文件的函数

你引入的外部脚本加载完成后会把POWERREVIEWS对象挂载到全局window上，只需要解决两个问题即可正常调用：TypeScript类型报错、调用前判断脚本是否加载完成。

步骤1：添加全局类型声明（TS项目必做） #

在项目的typings.d.ts或者任意.d.ts声明文件里添加如下代码，避免TS识别不到全局POWERREVIEWS对象报错：

declare global {
  interface Window {
    POWERREVIEWS: {
      tracker: {
        createTracker: (options: { merchantGroupId: string }) => {
          trackCheckout: (orderFeed: any) => void
          // 可根据官方文档补充其他方法的类型定义
        }
      }
    }
  }
}
export {}

步骤2：组件内调用方法 #

调用前必须判断window.POWERREVIEWS是否存在，避免脚本还没加载完成就调用导致报错，示例如下：

// 订单完成页组件示例
'use client' // 如果你用的是Next.js 13+ App Router 必须加这个标注，Pages Router不需要
import { useEffect } from 'react'

const OrderSuccessPage = () => {
  useEffect(() => {
    // 先判断脚本是否加载完成
    if (!window.POWERREVIEWS) return
    // 初始化tracker实例
    const tracker = window.POWERREVIEWS.tracker.createTracker({
      merchantGroupId: '替换为你的MERCHANT_GROUP_ID'
    })
    // 构造订单上报数据
    const orderFeed = {
      merchantGroupId: 'MERCHANT_GROUP_ID',
      merchantId: 'MERCHANT_ID',
      locale: 'LOCALE',
      merchantUserId: 'INTERNAL CUSTOMER_ID',
      marketingOptIn: true,
      userEmail: 'CUSTOMER_EMAIL ADDRESS',
      userFirstName: 'CUSTOMER FIRST_NAME',
      userLastName: 'CUSTOMER LAST_NAME',
      orderId: 'ORDER_ID',
      orderItems: [{
        page_id: 'PAGE_ID_1',
        product_name: 'PRODUCT_NAME_1',
        quantity: 1,
        unit_price: 99
      }]
    }
    // 调用上报方法
    tracker.trackCheckout(orderFeed)
  }, [])

  return <div>订单提交成功</div>
}

export default OrderSuccessPage

可选优化：复用tracker实例 #

如果需要在多个组件调用相关方法，可以把初始化逻辑抽成自定义Hook，避免重复初始化：

// hooks/usePowerReviews.ts
'use client'
import { useState, useEffect } from 'react'

export const usePowerReviews = () => {
  const [tracker, setTracker] = useState<any>(null)
  useEffect(() => {
    if (window.POWERREVIEWS) {
      const instance = window.POWERREVIEWS.tracker.createTracker({
        merchantGroupId: '你的MERCHANT_GROUP_ID'
      })
      setTracker(instance)
    }
  }, [])
  return tracker
}

其他组件直接调用即可：

const AnyComponent = () => {
  const tracker = usePowerReviews()
  const handleReport = () => {
    if (tracker) {
      // 调用对应上报方法
    }
  }
  return <button onClick={handleReport}>触发上报</button>
}

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