diff --git a/src/components/table-of-contents.tsx b/src/components/table-of-contents.tsx
index 797f904..cb5fe2a 100644
--- a/src/components/table-of-contents.tsx
+++ b/src/components/table-of-contents.tsx
@@ -285,10 +285,20 @@ export function TableOfContents({ showHeader = true }: TableOfContentsProps) {
     }, 2500)
   }
 
-  if (headings.length === 0) return null
-
+  // 注意：这里不能 `return null`。
+  //
+  // Astro 靠「渲染器探测」决定交给哪个框架渲染：@astrojs/react 的 check 会试渲染一次，
+  // 拿到 null 就认不出这是 React 组件；接着轮到 @astrojs/mdx 的 check，而它是把组件
+  // 当普通函数**裸调**（不在 React 渲染树里），useState 找不到 dispatcher，于是每次
+  // SSR 都往控制台打一条 "Invalid hook call"。页面本身没错，但那行日志很误导人。
+  //
+  // 始终返回 <nav>，没有标题时用 hidden 收起来 —— 视觉结果和 return null 一样。
   return (
-    <nav ref={navRef} aria-label="目录" className="toc-nav">
+    <nav
+      ref={navRef}
+      aria-label="目录"
+      className={cn("toc-nav", headings.length === 0 && "hidden")}
+    >
       {showHeader ? (
         <div className="flex items-center gap-2 mb-3">
           <div className="w-1 h-4 bg-primary rounded-full" />