如何解决React应用中AdSense的Uncaught TagError报错

报错原因 #

这个错误是因为adsbygoogle.push()被重复调用，或者<ins>元素在DOM中被重复渲染，导致AdSense尝试给已经填充过广告的元素再次加载广告。

具体解决步骤 #

• 把广告初始化逻辑放到useEffect中，确保只执行一次
  函数组件每次渲染都会执行顶部代码，所以将push()放在useEffect里并设置空依赖数组，保证仅在组件挂载时执行一次：

  import { useEffect } from 'react';
  
  export const SideAdPlaceholder = () => {
    useEffect(() => {
      (window.adsbygoogle = window.adsbygoogle || []).push({});
    }, []);
  
    return (
      <div className="adSides">
        <ins
          className="adsbygoogle"
          style={{ display: "block" }}
          data-ad-client="ca-<adsense account>"
          data-ad-slot="32777475897"
          data-ad-format="auto"
          data-full-width-responsive="true"
        ></ins>
      </div>
    );
  };
  

• 避免组件不必要的重复渲染
  如果父组件频繁重渲染导致广告组件重复挂载，用memo包裹组件，减少无意义的重渲染；如果页面中有多个该广告组件，给每个实例添加唯一的key：

  import { useEffect, memo } from 'react';
  
  const SideAdPlaceholder = () => {
    useEffect(() => {
      (window.adsbygoogle = window.adsbygoogle || []).push({});
    }, []);
  
    return (
      <div className="adSides">
        <ins
          className="adsbygoogle"
          style={{ display: "block" }}
          data-ad-client="ca-<adsense account>"
          data-ad-slot="32777475897"
          data-ad-format="auto"
          data-full-width-responsive="true"
        ></ins>
      </div>
    );
  };
  
  export default memo(SideAdPlaceholder);
  

• 检查脚本加载逻辑
  确认adsbygoogle.js脚本仅在Cookie同意后加载（你的脚本带有data-cookiescript="accepted"），且整个应用中只引入一次该脚本，避免重复加载导致的冲突。

• 给广告单元添加唯一标识（可选）
  若页面存在多个广告单元，给<ins>元素添加唯一id或data-ad-region属性，帮助AdSense区分不同单元：

  <ins
    className="adsbygoogle"
    id="sidebar-ad-unique"
    style={{ display: "block" }}
    data-ad-client="ca-<adsense account>"
    data-ad-slot="32777475897"
    data-ad-format="auto"
    data-full-width-responsive="true"
    data-ad-region="sidebar"
  ></ins>
  

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