useRouter()无法跳转至首页问题排查求助

问题根源及修正方案 #

你的代码存在几个关键问题，直接导致跳转失效：

1. useRouter使用错误

   • 在Next.js 13+的App Router（搭配"use client"指令）环境中，路由钩子需从next/navigation导入，而非next/router。
   • React钩子必须在组件顶层调用，不能放在handleSubmit函数内部。

2. 错误处理逻辑错误
   catch块中throw console.log(err);的写法无效：console.log返回undefined，抛出它不仅无法传递错误信息，还会中断后续代码执行，影响跳转逻辑。

3. 组件缺少渲染内容
   你的SignUp组件没有返回表单JSX，导致组件无法正常渲染，提交逻辑自然无法触发。

修正后的完整代码 #

"use client"
import { useState } from 'react';
import { auth } from '../../firebase-config';
import { createUserWithEmailAndPassword } from 'firebase/auth';
// 适配App Router的路由钩子导入
import { useRouter } from 'next/navigation';

const SignUp = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    // 在组件顶层调用路由钩子
    const router = useRouter();

    const handleSubmit = (e) => {
        e.preventDefault();
        
        createUserWithEmailAndPassword(auth, email, password)
        .then(() => {
            setEmail('');
            setPassword('');
            router.push('/');
        }).catch((err) => {
            // 直接打印错误，避免中断流程
            console.error('注册失败:', err);
        });
    };

    // 必须返回表单渲染内容
    return (
        <form onSubmit={handleSubmit}>
            <input
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="邮箱"
                required
            />
            <input
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                placeholder="密码"
                required
            />
            <button type="submit">注册</button>
        </form>
    );
};

export default SignUp;

额外检查点 #

• 确认Firebase配置正确，注册请求确实成功（可在Firebase控制台查看用户是否创建）。
• 若使用Next.js 12及以下的Pages Router，useRouter从next/router导入即可，但仍需放在组件顶层。
• 打开浏览器控制台，查看是否有路由或Firebase相关的报错信息。

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