Next.js14中Firebase Auth邮箱验证链接触发auth/invalid-action-code错误

你的问题核心有两个：一是Next.js开发模式下Strict Mode导致组件挂载两次，触发applyActionCode重复调用，验证码被使用后第二次调用就会返回无效错误；二是代码里存在几个逻辑错误会干扰验证流程。

问题分析 #

1. 组件重复挂载：Next.js 14 App Router的Client Component在开发模式下会开启Strict Mode，强制组件挂载两次（模拟卸载/重新挂载的场景），导致useEffect里的验证逻辑执行两次。第一次调用applyActionCode成功后，验证码就失效了，第二次调用自然触发auth/invalid-action-code。
2. 代码逻辑错误：
   • useEffect里打印的mode和actionCode变量未定义，会抛出控制台错误。
   • 最后一行setMessage('Invalid mode.');会覆盖验证成功/失败的消息，导致界面显示错误信息。

修复方案 #

1. 防止重复执行验证逻辑

用useRef创建一个标志位，确保验证逻辑只执行一次，即使组件挂载多次。

2. 修正代码里的逻辑错误

移除未定义变量的打印，删除错误的setMessage语句，同时补上mode参数的校验（确保是邮箱验证模式）。

修改后的完整代码 #

'use client';

import { useEffect, useState, useRef } from 'react';
import { getAuth, applyActionCode } from 'firebase/auth';
import { app } from '../../lib/firebase'; 

const UserManagement = () => {
  const [message, setMessage] = useState('');
  const [oobCode, setOobCode] = useState(null);
  const hasProcessedCode = useRef(false); // 标记是否已处理过验证码

  const auth = getAuth(app);
  
  const handleVerifyEmail = async (auth, actionCode) => {
    try {
      await applyActionCode(auth, actionCode);
      setMessage('邮箱验证成功，现在可以用邮箱和密码登录了。');
    } catch (error) {
      console.error('邮箱验证错误:', error);
      handleEmailVerificationError(error);
    }
  };

  const handleEmailVerificationError = (error) => {
    switch (error.code) {
      case 'auth/expired-action-code':
        setMessage('验证码已过期，请重新请求验证邮件。');
        break;
      case 'auth/invalid-action-code':
        setMessage('验证码无效，请检查链接后重试。');
        break;
      case 'auth/user-disabled':
        setMessage('该邮箱对应的账户已被禁用。');
        break;
      case 'auth/user-not-found':
        setMessage('未找到对应验证码的用户，账户可能已被删除。');
        break;
      default:
        setMessage('邮箱验证时发生未知错误，请重试。');
        break;
    }
  };

  useEffect(() => {
    console.log('UserManagement component mounted');
    
    if (typeof window === 'undefined' || hasProcessedCode.current) return;
    
    const urlParams = new URLSearchParams(window.location.search);
    const actionCode = urlParams.get('oobCode');
    const mode = urlParams.get('mode'); // 补上mode参数的获取
    
    setOobCode(actionCode);
  
    if (!actionCode || mode !== 'verifyEmail') { // 校验mode是否为邮箱验证
      setMessage('无效或缺失的验证码，或模式错误。');
      return;
    }
  
    console.log('Action Code:', actionCode);
    hasProcessedCode.current = true; // 标记已处理，避免重复执行
    handleVerifyEmail(auth, actionCode);
  }, []);  

  return (
    <div><p>{message}</p></div>
  );
};

export default UserManagement;

额外检查点 #

• 确认Firebase控制台的验证链接设置正确：只需填http://localhost:3000/usermgmt，Firebase会自动追加mode和oobCode参数，不需要手动写在链接里。
• 生产模式下Strict Mode默认关闭，组件不会挂载两次，这个问题在生产环境会自然消失，但开发时的修复能避免调试干扰。

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