Next.js添加GTM脚本至_document.tsx后构建出现类型错误，如何解决？

错误原因 #

该错误源于GTM脚本执行时，document.getElementsByTagName('script')[0]返回了null。在Next.js的_document.tsx服务端渲染阶段，页面DOM尚未完全构建，此时页面中还没有任何<script>标签，导致后续调用f.parentNode触发类型错误。

解决方案 #

1. 兜底获取DOM元素

修改脚本中获取插入节点的逻辑，当找不到<script>标签时，直接使用<body>作为插入目标：

<script
  dangerouslySetInnerHTML={{
    __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0] || d.body;
      var j=d.createElement(s);var dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
      'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','GTM-XXXXXX');`,
  }}
></script>

2. 使用Next.js官方next/script组件（推荐）

Next.js 11+提供的next/script组件能更好地处理脚本加载时机，避免服务端渲染的DOM问题。建议将GTM脚本移至_app.tsx中：

import Script from 'next/script';

function MyApp({ Component, pageProps }) {
  return (
    <>
      <Script
        id="gtm-script"
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{
          __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0] || d.body;
            var j=d.createElement(s);var dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
            })(window,document,'script','dataLayer','GTM-XXXXXX');`,
        }}
      />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

afterInteractive策略会在页面可交互后加载脚本，既保证功能正常，又不阻塞页面渲染。

3. 增加空值判断逻辑

在脚本中添加判断，确保操作DOM节点前元素存在：

<script
  dangerouslySetInnerHTML={{
    __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0];
      var j=d.createElement(s);var dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
      'https://www.googletagmanager.com/gtm.js?id='+i+dl;
      if(f && f.parentNode){
        f.parentNode.insertBefore(j,f);
      } else {
        d.body.appendChild(j);
      }
      })(window,document,'script','dataLayer','GTM-XXXXXX');`,
  }}
></script>

内容的提问来源于stack exchange，提问作者João Vitor