NextJS通过URL参数禁用Segment脚本？改写代码遇useContext报错

错误原因 #

你遇到的TypeError: Cannot read properties of null (reading 'useContext')是因为**_document.tsx是NextJS的服务端渲染入口文件，不支持使用React Hooks**（比如useContext）。Hooks依赖客户端的React上下文环境，而服务端渲染的Document组件不在这个环境中，直接使用会触发上下文为空的错误。

另外，获取URL查询参数需要在服务端的getInitialProps方法中处理，不能用客户端的window.location方式。

正确修改_document.tsx的方案 #

下面是符合NextJS规范的修改代码，通过服务端获取查询参数，条件渲染Segment脚本：

import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    // 从服务端请求中解析URL参数
    const { req } = ctx;
    const url = new URL(req.url, `http://${req.headers.host}`);
    // 判断是否存在no-segment参数（可根据实际参数值调整判断逻辑）
    const noSegment = url.searchParams.get('no-segment') !== null;

    return { ...initialProps, noSegment };
  }

  render() {
    const { noSegment } = this.props;

    return (
      <Html>
        <Head>
          {/* 仅当没有no-segment参数时加载Segment脚本 */}
          {!noSegment && (
            <script
              src="你的Segment脚本URL"
              async
              // 补充Segment脚本所需的其他属性，比如data-write-key等
            />
          )}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

备用方案：客户端动态加载Segment #

如果修改_document.tsx有顾虑，可以在_app.tsx中实现客户端条件加载：

import { useEffect } from 'react';
import type { AppProps } from 'next/app';

export default function MyApp({ Component, pageProps }: AppProps) {
  useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search);
    const noSegment = urlParams.get('no-segment');
    
    if (!noSegment) {
      // 动态创建并加载Segment脚本
      const script = document.createElement('script');
      script.src = '你的Segment脚本URL';
      script.async = true;
      // 补充Segment的配置参数，比如data-write-key
      script.setAttribute('data-write-key', '你的Segment密钥');
      document.head.appendChild(script);
    }
  }, []);

  return <Component {...pageProps} />;
}

解决Webdriver截图隐藏Intercom的备选方法 #

如果暂时无法调整脚本加载逻辑，可以在Webdriver中执行安全的JS代码来隐藏Intercom元素，避免单个元素获取失败的问题：

// 在Webdriver中执行这段代码
driver.executeScript(`
  // 匹配所有Intercom相关元素
  const intercomNodes = document.querySelectorAll('.intercom-container, [data-intercom-component], #intercom-container');
  intercomNodes.forEach(node => {
    if (node) {
      node.style.display = 'none';
      node.style.visibility = 'hidden';
    }
  });
`);

这段代码通过querySelectorAll获取所有可能的Intercom元素，遍历判断元素存在后再设置隐藏样式，不会因为单个元素不存在触发null错误。

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