发生错误是因为窗口尚未可用，而组件仍在挂载。组件挂载后，可以访问窗口对象。

您可以创建一个非常有用的钩子来获取动态窗口。innerHeight或window.innerWidth

const useDeviceSize = () => {

  const [width, setWidth] = useState(0)
  const [height, setHeight] = useState(0)

  const handleWindowResize = () => {
    setWidth(window.innerWidth);
    setHeight(window.innerHeight);
  }

  useEffect(() => {
    // component is mounted and window is available
    handleWindowResize();
    window.addEventListener('resize', handleWindowResize);
    // unsubscribe from the event on component unmount
    return () => window.removeEventListener('resize', handleWindowResize);
  }, []);

  return [width, height]

}

export default useDeviceSize 

用例:

const [width, height] = useDeviceSize();

当我在next.js中开发web应用程序时，我也面临着同样的问题，这解决了我的问题，你必须在生命周期方法或react Hook中引用引用窗口对象。例如，假设我想用redux创建一个存储变量，在这个存储中我想使用一个windows对象，我可以这样做:

let store
useEffect(()=>{
    store = createStore(rootReducers,   window.__REDUX_DEVTOOLS_EXTENSION__ && 
    window.__REDUX_DEVTOOLS_EXTENSION__())
 }, [])
 ....

所以基本上，当你使用window的对象时，总是使用钩子来玩或者componentDidMount()生命周期方法

如果它是NextJS应用，并且在_document.js中，使用下面的方法:

<script dangerouslySetInnerHTML={{
        __html: `
            var innerHeight = window.innerHeight;
        `
        }} />

对于Next.js 12.1.0版本，我发现我们可以使用process。标题，以确定我们是在浏览器中还是在节点端。希望能有所帮助!

export default function Projects(props) {
    console.log({ 'process?.title': process?.title });

    return (
        <div></div>
    );
}

1. 从终端，我接收{'进程?。标题':'节点'}

2. 从Chrome devtool，我建议{'进程?。Title: 'browser'}

将代码从componentWillMount()移动到componentDidMount():

componentDidMount() {
  console.log('window.innerHeight', window.innerHeight);
}

在Next.js中，componentDidMount()只在提供窗口和其他浏览器特定api的客户端上执行。来自Next.js wiki:

js是通用的，这意味着它首先在服务器端执行代码， 然后客户端。窗口对象只在客户端显示，因此if 你绝对需要在一些React组件中访问它 应该把该代码放在componentDidMount中。这个生命周期方法 只能在客户端执行。你可能还想检查一下是否有 是不是有其他的通用库可以满足你的需要。

同样，componentWillMount()将在React的v17中被弃用，因此在不久的将来使用它实际上可能是不安全的。

对于这种情况，Next.js具有动态导入功能。

对于包含只在浏览器中工作的库的模块，建议使用动态导入。请参考