Next.js添加'use client;'后出现NavigationBar初始化前访问错误

我在Next.js里有个带搜索框的NavigationBar组件，代码如下：

<div className="w-full flex flex-row items-center py-5 justify-between">
    <div className="w-40">
      <Link href="/">
        <Image
          className="mx-5"
          src="images/logomark.svg"
          width={100}
          height={32}
          alt="logo"
        />
      </Link>
    </div>
    <SearchBar />
</div>

为了让NavigationBar支持状态管理，我在组件顶部加了'use client;'，随即抛出错误：
ReferenceError: Cannot access 'NavigationBar' before initialization

通过排查发现问题和SearchBar组件有关——原本这个组件带状态且有'use client;'，移除它后NavigationBar能正常渲染。我把SearchBar简化成无'use client;'、仅返回<div />的组件：

export const SearchBar = () => {
  return <div />;
};

但错误依然存在。推测可能和水合（hydration）或HTML语义有关，但不清楚具体原因和调试方法。

运行时栈追踪信息：

Uncaught (in promise) ReferenceError: Cannot access 'NavigationBar' before initialization

Warning: An error occurred during hydration. The server HTML was replaced with client content in <#document>.

The above error occurred in the <NotFoundErrorBoundary> component:

Uncaught Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

这个错误的核心原因几乎都是循环导入：NavigationBar导入了SearchBar，而SearchBar（或其依赖的某个模块）又反向导入了NavigationBar，导致组件初始化顺序混乱，触发"Cannot access before initialization"错误。

调试与解决步骤 #

• 检查循环引用：仔细查看SearchBar的代码（包括它导入的所有模块），确认是否直接或间接导入了NavigationBar。比如SearchBar里可能导入了某个自定义hooks，而这个hooks又导入了NavigationBar，或者SearchBar本身就有import { NavigationBar } from './NavigationBar'这类代码。
• 拆分公共逻辑：如果存在循环依赖，把两者共用的状态、工具函数抽成独立的模块（比如common.js或hooks/useCommon.js），让NavigationBar和SearchBar都导入这个独立模块，而不是互相引用。
• 验证导入顺序：确保在任何模块里，都不会在组件定义前就引用NavigationBar。比如不要在SearchBar的顶层代码里执行依赖NavigationBar的逻辑。
• 临时验证：把SearchBar的代码直接嵌入到NavigationBar组件内部（不通过导入），如果此时错误消失，就可以100%确认是导入环节的循环依赖问题。

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