React与Gatsby中函数参数默认值条件传递解决window未定义问题

直接在函数参数里写element = window会报错，因为Gatsby的服务端渲染阶段不存在window对象，而参数默认值会在函数定义时就求值，这时候就会触发错误。你之前尝试的语法不符合JS规范，换以下几种正确写法即可解决：

方案1：参数默认值里直接做存在性判断 #

用typeof判断window是否存在，将其作为参数的默认值表达式：

function useEventListener(element = typeof window !== "undefined" ? window : undefined) {
  // 先判断目标元素是否存在（即window是否可用）
  if (!element) return;
  
  // 这里编写你的事件监听逻辑，比如添加监听、清理监听等
}

这种写法会在参数初始化时就判断window状态，不存在则给element设为undefined，之后直接返回不执行后续逻辑，避免报错。

方案2：函数内部处理默认值 #

把默认值的判断移到函数内部，逻辑更直观：

function useEventListener(element) {
  // 优先使用传入的element，没有的话再尝试用window（仅当window存在时）
  const targetElement = element ?? (typeof window !== "undefined" ? window : undefined);
  
  if (!targetElement) return;
  
  // 后续事件监听逻辑
}

方案3：结合useEffect确保客户端执行（更适合React Hook场景） #

如果这个自定义Hook是用来添加事件监听的，完全可以把逻辑放在useEffect里——因为useEffect的回调只会在客户端组件挂载后执行，服务端不会运行这段代码，从根源上避免window不存在的问题：

import { useEffect } from 'react';

function useEventListener(eventType, handler, element) {
  useEffect(() => {
    // 此处window肯定存在，直接使用即可
    const targetElement = element ?? window;
    
    targetElement.addEventListener(eventType, handler);
    
    // 清理函数：组件卸载时移除监听
    return () => {
      targetElement.removeEventListener(eventType, handler);
    };
  }, [eventType, handler, element]);
}

这种方案更符合React Hook的最佳实践，也彻底规避了服务端渲染的window问题。

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