已将Firebase Auth移入useContext，如何在Login组件调用GoogleLogin函数？

问题根源 #

当前你的UserContext.Provider仅传递了user对象，未将定义好的GoogleLogin函数暴露给子组件，导致Login组件无法访问该函数。

解决方案步骤 #

1. 修改UserContext，传递包含函数的上下文对象 #

更新UserContext文件，将Provider的value改为包含user和GoogleLogin的对象，同时将googleProvider移到组件外部，避免每次渲染重复实例化：

import { signInWithPopup, GoogleAuthProvider } from 'firebase/auth';
import { auth } from '../utils/firebase';
import { useAuthState } from 'react-firebase-hooks/auth';
import { createContext } from 'react';
import { useRouter } from 'next/router';

// 将GoogleProvider移到组件外，避免重复创建实例
const googleProvider = new GoogleAuthProvider();

// 初始化Context时设置默认值，防止未包裹Provider时出现报错
const UserContext = createContext({
  user: null,
  GoogleLogin: () => {}
});

export const UserProvider = ({ children}) => {
  const route = useRouter();
  const [user, loading] = useAuthState(auth);

  const GoogleLogin = async () => {
    try {
      const result = await signInWithPopup(auth, googleProvider);
      // 可在此添加登录成功后的路由跳转逻辑
      // route.push('/');
    } catch (error) {
      console.error('登录失败:', error);
    }
  };

  // 传递包含user和登录函数的上下文对象
  return (
    <UserContext.Provider value={{ user, GoogleLogin }}>
      {children}
    </UserContext.Provider>
  );
};

export default UserContext;

2. 在Login组件中获取并使用GoogleLogin函数 #

更新Login组件，从Context中解构出GoogleLogin函数，绑定到按钮的onClick事件：

import UserContext from '../../components/UserContext';
import { useContext } from 'react';
import { FcGoogle } from 'react-icons/fc';

const Login = () => {
  // 从上下文解构出所需的user和GoogleLogin函数
  const { user, GoogleLogin } = useContext(UserContext);

  // 若已登录，可直接跳转（可选逻辑）
  if (user) {
    // const router = useRouter();
    // router.push('/');
    return <div>已登录，正在跳转...</div>;
  }

  return (
    <div className='shadow-xl mt-32 p-10 text-gray-700'>
      <h2 className='text-2xl font-medium'>Join Today</h2>
      <div className='py-4'>
        <h3 className='py-4'>Sign in with one of the providers</h3>
        <button
          onClick={GoogleLogin}
          className='text-white bg-gray-700 w-full font-medium rounded-lg flex align-middle p-4 gap-2'>
          <FcGoogle className='text-2xl'></FcGoogle> Sign in with Google
        </button>
      </div>
    </div>
  );
};

export default Login;

额外提示 #

• 可在GoogleLogin函数中添加登录成功后的路由跳转逻辑，比如调用route.push('/')跳转到首页。
• 给Context设置默认空函数，可避免在未被UserProvider包裹的组件中出现undefined报错。

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