如何将Google Tag Manager参数从TypeScript改写为React格式

问题分析 #

你的文件是.js后缀的JavaScript文件，但代码中使用了TypeScript专属的类型注解语法（tagManagerArgs: TagManagerArgs），JavaScript不支持该语法，因此触发了报错。

修复方案 #

以下三种方式可根据你的需求选择：

方式1：移除类型注解（纯JavaScript兼容）

直接删除类型标注，保留核心逻辑即可，修改后的代码如下：

import React, { useEffect } from 'react'
import TagManager from 'react-gtm-module'
import { Toaster } from 'react-hot-toast'
import './Product.scss'
import { Layout } from '../components'
import '../styles/globals.css'
import { StateContext } from '../context/StateContext'

function MyApp({ Component, pageProps }) {
  const gtmId = process.env.NEXT_PUBLIC_GTM_ID || "";

  const tagManagerArgs = {
    gtmId,
  }

  useEffect(() => {
    TagManager.initialize(tagManagerArgs)
  }, [])

  return (
    <StateContext>
      <Layout>
        <Toaster />
        <Component {...pageProps} />
      </Layout>
    </StateContext>
  )
}

export default MyApp

方式2：保留类型提示（JSDoc兼容）

如果想要保留类型检查提示，又不想切换到TypeScript文件，可以用JSDoc注释标注类型，编辑器（如VS Code）会识别并提供提示：

import React, { useEffect } from 'react'
import TagManager, { TagManagerArgs } from 'react-gtm-module'
import { Toaster } from 'react-hot-toast'
import './Product.scss'
import { Layout } from '../components'
import '../styles/globals.css'
import { StateContext } from '../context/StateContext'

function MyApp({ Component, pageProps }) {
  const gtmId = process.env.NEXT_PUBLIC_GTM_ID || "";

  /** @type {TagManagerArgs} */
  const tagManagerArgs = {
    gtmId,
  }

  useEffect(() => {
    TagManager.initialize(tagManagerArgs)
  }, [])

  return (
    <StateContext>
      <Layout>
        <Toaster />
        <Component {...pageProps} />
      </Layout>
    </StateContext>
  )
}

export default MyApp

方式3：切换到TypeScript文件

如果项目后续计划使用TypeScript，直接将_app.js重命名为_app.tsx，原代码的类型注解就能正常使用，无需修改逻辑。

注意事项 #

• 确保NEXT_PUBLIC_GTM_ID环境变量已在项目的.env文件中正确配置，否则Google Tag Manager无法完成初始化。

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