为何signInWithPopup搭配shadcn/ui按钮无响应？

1. 修正Next.js 14路由钩子的使用 #

Next.js 14默认使用App Router，你当前导入的useRouter来自next/router（属于Pages Router的API），在App Router组件中使用会触发错误，进而影响组件功能。替换为App Router的路由钩子：

// 替换原有导入语句
import { useRouter } from "next/navigation";

2. 稳定Firebase Auth实例 #

每次组件渲染时重新调用getAuth(app)会创建新的auth实例，可能导致逻辑异常。可以通过两种方式解决：

方案一：在Firebase配置文件中直接导出auth #

修改@/lib/firebase.ts：

import { app } from "./firebase";
import { getAuth } from "firebase/auth";

// 一次性创建并导出auth实例
export const auth = getAuth(app);

然后在页面组件中直接导入使用：

import { auth } from "@/lib/firebase"; // 替代组件内的getAuth调用

方案二：组件内缓存auth实例 #

如果不想修改配置文件，在页面组件中用useMemo缓存实例：

import { useMemo } from "react";

export default function Home() {
  const router = useRouter();
  // 缓存auth实例，避免每次渲染重复创建
  const auth = useMemo(() => getAuth(app), [app]);

  // 其余代码保持不变
}

3. 检查浏览器控制台错误 #

打开浏览器开发者工具（F12）的Console面板，查看是否存在以下常见错误：

• Firebase配置参数错误（如API密钥、项目ID不匹配）
• 第三方登录提供商的OAuth配置未在Firebase控制台完成（如Google/GitHub/Facebook的客户端ID未设置）
• 组件渲染时的语法或逻辑报错

4. 验证基础点击事件 #

先简化测试，给按钮绑定一个基础点击事件，确认事件是否能正常触发：

<Button onClick={() => console.log("Google按钮被点击")}>
  <FaGoogle className="mr-2 h-4 w-4" /> Sign In with Google
</Button>

如果该事件能触发，说明问题出在Firebase或路由逻辑上；如果仍无反应，检查是否有其他元素通过CSS层级覆盖在按钮上方，或者组件是否未被正确渲染。

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