React TypeScript传递Props时出现报错，寻求解决方案

报错原因 #

你用的应该是Next.js这类服务端渲染（SSR）框架，组件在服务器端渲染阶段，浏览器的window对象还未生成，直接在组件顶层写window.xxx就会触发这个错误。

解决方案 #

1. 等客户端渲染完成后再访问window #

用React的useEffect钩子，确保组件挂载到浏览器环境后再操作window：

import { useEffect, useState } from 'react';

function YourComponent() {
  const [windowWidth, setWindowWidth] = useState(0);

  useEffect(() => {
    // 组件在浏览器中挂载后，再获取窗口宽度
    setWindowWidth(window.innerWidth);
    
    // 可选：监听窗口尺寸变化
    const handleResize = () => setWindowWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    // 组件卸载时移除监听，避免内存泄漏
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return <div>当前窗口宽度：{windowWidth}</div>;
}

2. 先判断window是否存在再使用 #

直接在代码中增加环境判断，确认是客户端环境后再访问window：

function YourComponent() {
  let windowWidth = 0;
  // 先检查window是否存在，再执行赋值操作
  if (typeof window !== 'undefined') {
    windowWidth = window.innerWidth;
  }

  return <div>当前窗口宽度：{windowWidth}</div>;
}

3. 动态导入仅客户端运行的组件 #

如果组件只需要在浏览器环境运行，用Next.js的动态导入并禁用服务端渲染：

import dynamic from 'next/dynamic';

// 动态导入目标组件，关闭SSR模式
const ClientOnlyComponent = dynamic(
  () => import('../components/YourComponent'),
  { ssr: false }
);

function Page() {
  return <ClientOnlyComponent />;
}

4. 封装自定义Hook复用窗口逻辑 #

把获取窗口尺寸的逻辑封装成自定义Hook，方便后续多处复用：

import { useState, useEffect } from 'react';

export function useWindowSize() {
  const [size, setSize] = useState({ width: 0, height: 0 });

  useEffect(() => {
    const updateSize = () => {
      setSize({ width: window.innerWidth, height: window.innerHeight });
    };
    // 初始化窗口尺寸
    updateSize();
    // 监听窗口变化
    window.addEventListener('resize', updateSize);
    // 组件卸载时清理监听
    return () => window.removeEventListener('resize', updateSize);
  }, []);

  return size;
}

// 使用自定义Hook
function YourComponent() {
  const { width } = useWindowSize();
  return <div>当前窗口宽度：{width}</div>;
}

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