TypeScript React项目中FB API无法返回并显示数据问题求助

我在TypeScript React项目里尝试获取并展示Facebook页面的帖子（包含图片和文案/描述），但完全拿不到数据，控制台也没任何输出。查资料后发现广告拦截器至少会在本地环境下阻断这个API，于是我给Facebook的连接链接加了js.src属性，这是对官方快速入门代码最主要的修改，同时为了安全把appId的部分字符换成了****。

以下是我的index.html代码：

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
  <script>
    function init() {
      FB.api(
        "/me",
        "GET",
        { fields: "id,name,about,posts{full_picture,message}" },
        function (response) {
          console.log(response.name);
        }
      );
    }
    window.fbAsyncInit = function () {
      FB.init({
        appId: "713461583720****",
        autoLogAppEvents: true,
        xfbml: true,
        version: "v16.0",
      });
      init();
    };
  </script>
  <script
    async
    defer
    crossorigin="anonymous"
    js.src="https://connect.facebook.net/en_US/sdk.js"
  ></script>
</body>

问题分析与解决步骤 #

1. SDK加载失败：错误的属性名
   你写的js.src是无效属性，浏览器根本识别不了，这直接导致Facebook SDK没加载成功。把这个改成标准的src属性就行，这是最核心的问题。

2. API调用路径错误
   /me接口指向的是当前授权的用户，不是Facebook页面。要获取页面帖子，得调用页面ID对应的接口，比如/{你的页面ID}/posts，记得把路径里的页面ID换成你实际要获取的页面ID（可以在页面的「关于」板块找到）。

3. 缺少用户授权
   调用Graph API获取页面数据需要用户授权，得先完成登录流程，并且申请对应的权限（比如pages_read_engagement、pages_show_list）。本地测试时，确保你是目标页面的管理员，否则可能拿不到数据。

4. 广告拦截器干扰
   本地环境下广告拦截器确实会拦截Facebook的请求，测试时可以临时关闭广告拦截器，或者把connect.facebook.net加入拦截白名单。

修正后的代码示例 #

<body>
  <div id="root"></div>
  <script type="module" src="/src/main.tsx"></script>
  <script>
    function init() {
      // 先检查登录授权状态
      FB.getLoginStatus(function(response) {
        if (response.status === 'connected') {
          // 已授权，调用页面帖子接口
          FB.api(
            "/123456789/posts", // 替换成你的Facebook页面ID
            "GET",
            { fields: "full_picture,message" },
            function (response) {
              console.log('页面帖子数据：', response);
            }
          );
        } else {
          // 未授权，引导用户登录并申请权限
          FB.login(function(response) {
            if (response.authResponse) {
              init(); // 登录成功后重新调用接口
            } else {
              console.log('用户取消登录或授权失败');
            }
          }, { scope: 'pages_show_list,pages_read_engagement' });
        }
      });
    }
    window.fbAsyncInit = function () {
      FB.init({
        appId: "713461583720****",
        autoLogAppEvents: true,
        xfbml: true,
        version: "v16.0",
      });
      init();
    };
  </script>
  <script
    async
    defer
    crossorigin="anonymous"
    src="https://connect.facebook.net/en_US/sdk.js"
  ></script>
</body>

额外注意事项 #

• 在Facebook开发者后台，要把你的本地地址（比如http://localhost:3000）添加到「OAuth 重定向 URI」列表里，否则登录授权会失败。
• 打开浏览器控制台的「Network」和「Console」标签，查看是否有请求失败或报错信息，比如403权限错误、SDK加载失败，这些信息能帮你快速定位问题。
• 如果是公开页面，确保页面的帖子权限设置为公开，否则即使授权了也拿不到数据。

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