JavaScript数组解构重命名变量解决React Firebase Hooks变量冲突

在使用多个React Firebase Hooks时，由于不同Hook返回的数组元素（如loading、error）同名，直接解构会导致变量重复声明错误，解决核心是在数组解构时为重复变量重命名，同时通过逻辑组合实现任一加载状态的判断。

1. 解构时重命名重复变量 #

对每个Hook返回的loading和error变量赋予唯一名称，避免冲突：

import { useSignInWithEmailAndPassword, useSignInWithGoogle } from 'react-firebase-hooks/auth';
import { auth } from './firebase-config';

// 为邮箱登录的loading/error重命名为loadingEmail、errorEmail
const [signInWithEmailAndPassword, loadingEmail, errorEmail] = useSignInWithEmailAndPassword(auth);
// 为谷歌登录的loading/error重命名为loadingGoogle、errorGoogle
const [signInWithGoogle, loadingGoogle, errorGoogle] = useSignInWithGoogle(auth);

2. 判断任一加载状态 #

通过逻辑或（||）组合所有加载状态变量，只要其中一个为true，就显示加载动画：

// 合并所有登录操作的加载状态
const isLoading = loadingEmail || loadingGoogle;

// 组件中使用加载状态
function LoginComponent() {
  return (
    <div>
      {/* 任一登录操作加载时显示动画 */}
      {isLoading && <div className="loading-animation">正在登录...</div>}
      
      {/* 邮箱登录表单 */}
      <form onSubmit={(e) => {
        e.preventDefault();
        signInWithEmailAndPassword('user@example.com', 'password123');
      }}>
        {/* 表单内容 */}
      </form>
      
      {/* 谷歌登录按钮 */}
      <button onClick={() => signInWithGoogle()}>
        用谷歌登录
      </button>
    </div>
  );
}

扩展说明 #

如果后续新增其他登录方式（如Facebook、GitHub），只需按相同逻辑重命名对应Hook的loading变量，再添加到isLoading的判断中即可：

const [signInWithFacebook, loadingFacebook] = useSignInWithFacebook(auth);
const isLoading = loadingEmail || loadingGoogle || loadingFacebook;

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