Web Share API在Firefox（React/NextJS环境）无法正常工作

问题现象 #

在 Next.js/React 项目中使用以下代码调用 Web Share API 时，Firefox 浏览器（桌面端和移动端）均无法正常触发分享弹窗，但该代码在 Safari 中可以正常运行：

// NextJS/React
if (navigator.share) await navigator.share(data);

但采用原生 Vanilla JS 编写的相同逻辑，却能在包括 Firefox 在内的所有主流浏览器中正常工作：

// VanillaJS
if (navigator.share) { 
   navigator.share({
      title: 'WebShare API Demo',
      url: 'https://codepen.io/ayoisaiah/pen/YbNazJ'
    }).then(() => {
      console.log('Thanks for sharing!');
    })
    .catch(console.error);
} else {
    shareDialog.classList.add('is-open');
}

可能的原因 #

1. Firefox 对调用时机的严格限制：Firefox 要求 Web Share API 必须由用户主动交互行为触发（比如点击、触摸事件），不能在 useEffect、定时器、SSR 渲染阶段等非用户交互上下文调用，React 中若不小心在非交互回调里调用，会触发权限拦截。
2. Next.js SSR/SSG 的环境差异：服务端渲染阶段不存在 navigator 对象，若代码未做客户端环境判断，可能导致初始化逻辑异常，影响后续 API 调用。
3. React 合成事件的兼容性：Firefox 对 React 合成事件中的 API 调用可能存在特殊处理，原生事件监听的方式反而能绕过这个问题。

复现步骤 #

1. 创建一个全新的 Next.js 项目（支持 Pages Router 或 App Router）。
2. 在页面组件中添加一个按钮，在 onClick 回调中直接调用 navigator.share（如用户提供的 React 代码）。
3. 在 Firefox 中启动项目，点击按钮，观察分享弹窗是否弹出。
4. 新建一个静态 HTML 文件，用 Vanilla JS 编写相同的分享逻辑，在 Firefox 中打开测试，确认弹窗正常弹出。

解决办法 #

1. 确保在用户交互回调内调用 API #

这是最关键的一点，严格绑定到用户主动触发的事件上：

'use client'; // Next.js 13+ App Router 需要添加该指令

export default function ShareButton() {
  const handleShare = async () => {
    const shareData = {
      title: '我的分享内容',
      url: window.location.href
    };

    // 先判断客户端环境及 API 可用性
    if (typeof window !== 'undefined' && navigator.share) {
      try {
        await navigator.share(shareData);
        console.log('分享成功');
      } catch (error) {
        // 捕获错误排查原因（比如用户取消分享、权限问题）
        console.error('分享失败:', error.message);
      }
    } else {
      console.log('当前浏览器不支持 Web Share API');
      // 这里可以添加自定义分享弹窗的逻辑
    }
  };

  return <button onClick={handleShare}>点击分享</button>;
}

2. 使用原生事件监听替代 React 合成事件（可选） #

如果合成事件仍存在兼容性问题，通过 DOM ref 添加原生事件监听：

'use client';
import { useEffect, useRef } from 'react';

export default function ShareButton() {
  const buttonRef = useRef(null);

  useEffect(() => {
    const handleNativeShare = async () => {
      const shareData = {
        title: '我的分享内容',
        url: window.location.href
      };

      if (navigator.share) {
        try {
          await navigator.share(shareData);
          console.log('分享成功');
        } catch (error) {
          console.error('分享失败:', error.message);
        }
      }
    };

    const button = buttonRef.current;
    if (button) {
      button.addEventListener('click', handleNativeShare);
      // 组件卸载时移除监听
      return () => button.removeEventListener('click', handleNativeShare);
    }
  }, []);

  return <button ref={buttonRef}>点击分享</button>;
}

3. 严格区分客户端与服务端环境 #

确保代码只在客户端执行：

• Pages Router 中：在 useEffect 内执行分享逻辑，或者用 typeof window !== 'undefined' 包裹。
• App Router 中：给组件添加 'use client' 指令，标记为客户端组件。

替代方案 #

如果 Web Share API 仍无法正常工作，可实现自定义分享弹窗，针对主流平台生成分享链接：

// 示例：自定义分享弹窗核心逻辑
const handleFallbackShare = () => {
  const url = encodeURIComponent(window.location.href);
  const title = encodeURIComponent('我的分享内容');

  const shareLinks = [
    { name: 'Twitter', url: `https://twitter.com/intent/tweet?url=${url}&text=${title}` },
    { name: '微信', url: `https://share.weixin.qq.com/menu/share?url=${url}&title=${title}` },
    // 其他平台的分享链接
  ];

  // 渲染分享链接列表或弹窗
  console.log('自定义分享链接:', shareLinks);
};

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