Next.js+TypeScript集成react-facebook-login无弹窗/跳转问题求助

控制台报错FB.login() called before FB.init()，核心原因是Facebook JS SDK未完成初始化就触发了登录操作。在Next.js的服务端渲染（SSR）环境下，react-facebook-login默认的SDK加载逻辑会因为客户端/服务端执行时机差异，无法在浏览器中正确初始化FB对象，导致调用登录接口时出错。

1. 手动在客户端加载Facebook SDK #

Next.js 11+推荐用next/script组件加载第三方脚本，确保仅在客户端环境执行：

import Script from 'next/script';
import FacebookLogin, { RenderProps } from "react-facebook-login/dist/facebook-login-render-props";
import { useState, useEffect } from 'react';

const responseFacebook = (response: any) => {
    console.log(response);
};

const FacebookLoginButton = () => {
  const [sdkLoaded, setSdkLoaded] = useState(false);

  useEffect(() => {
    window.fbAsyncInit = function() {
      window.FB?.init({
        appId      : '265554609068125',
        cookie     : true,
        xfbml      : true,
        version    : 'v18.0' // 替换为Facebook SDK最新版本
      });
      setSdkLoaded(true);
    };
  }, []);

  return (
    <>
      {/* 加载Facebook SDK */}
      <Script
        src="https://connect.facebook.net/en_US/sdk.js"
        strategy="lazyOnload"
      />
      {/* 仅在SDK加载完成后渲染登录按钮 */}
      {sdkLoaded && (
        <FacebookLogin
          appId="265554609068125"
          autoLoad={false}
          fields="name,email,picture"
          callback={responseFacebook}
          render={(renderProps: RenderProps) => (
            <button onClick={renderProps.onClick}>Hello</button>
          )}
        />
      )}
    </>
  );
};

export default FacebookLoginButton;

2. 替代方案：直接调用Facebook原生API #

如果react-facebook-login的封装仍存在问题，可以绕过封装直接使用FB原生API实现登录：

import Script from 'next/script';
import { useState, useEffect } from 'react';

const FacebookLoginButton = () => {
  const [sdkLoaded, setSdkLoaded] = useState(false);

  useEffect(() => {
    window.fbAsyncInit = function() {
      window.FB?.init({
        appId      : '265554609068125',
        cookie     : true,
        xfbml      : true,
        version    : 'v18.0'
      });
      setSdkLoaded(true);
    };
  }, []);

  const handleFacebookLogin = () => {
    if (!window.FB) return;
    window.FB.login((response) => {
      if (response.authResponse) {
        console.log('登录成功:', response.authResponse);
        // 调用API获取用户信息
        window.FB.api('/me', { fields: 'name,email,picture' }, (userInfo) => {
          console.log('用户信息:', userInfo);
        });
      } else {
        console.log('用户取消登录或登录失败');
      }
    }, { scope: 'public_profile,email' });
  };

  return (
    <>
      <Script
        src="https://connect.facebook.net/en_US/sdk.js"
        strategy="lazyOnload"
      />
      {sdkLoaded && <button onClick={handleFacebookLogin}>Hello</button>}
    </>
  );
};

export default FacebookLoginButton;

3. 关键注意事项 #

• SDK版本：务必使用Facebook SDK的最新版本，可在官方文档中查询
• 客户端执行：所有与FB相关的代码必须在浏览器环境下运行，避免服务端渲染阶段执行
• App配置验证：确认你的Facebook App ID已正确配置，且当前域名已添加到App的「OAuth客户端设置」有效跳转域名列表中

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