如何在Next.js中使用React Pro Sidebar时更新侧边栏高度以覆盖文档总高度

我正在Next.js中使用React Pro Sidebar，但这个问题看起来和JS、HTML、CSS相关。我已经尝试过Stack Overflow上很多问题的“解决方案”，但都没起作用，而且我很惊讶React Pro Sidebar本身居然没有解决这个问题。

每当我路由到一个高度更大的页面时，就会出现这样的情况：

这是因为我一直无法将侧边栏的高度更新为整个文档的高度。文档的高度本身也是个问题，因为我找不到通过事件（比如resize）跟踪它的方法。文档的总高度似乎可以通过document.body.scrollHeight获取。

我尝试为document.body.scrollHeight创建了一个useEffect，但似乎不够（在Next.js中，你可能需要创建一个不带SSR的动态组件）：

const [viewHeight, setViewHeight] = useState<string | number>("100vh")

useEffect(() => {
  setViewHeight(document.body.scrollHeight)
}, [document.body.scrollHeight])

...

<ProSidebar style={{ height: viewHeight }}>

...

我还尝试创建了ResizeObserver，但也没用：

useEffect(() => {
  const observer = new ResizeObserver(() => {
    setViewHeight(document.body.scrollHeight)
  })
  observer.observe(document.body)
}, [])

另外，针对React Pro Sidebar，我还尝试了其一位贡献者在相关问题中提出的解决方案：

<Sidebar
  defaultCollapsed={isCollapsed}
  rootStyles={{
    [`.${sidebarClasses.container}`]: {
      backgroundColor: "#ffffff",
      height: "100vh !important",
    },
    [`.${sidebarClasses.root}`]: {},
  }}
>

有没有人知道一个针对JS（或React）的特定解决方案，或者更好的通用解决方案来更新侧边栏高度？

备注：内容来源于stack exchange，提问作者psygo