Next.js应用发布至FB、Ins、LinkedIn时Emoji无法正常渲染

问题背景 #

开发的社交媒体管理应用支持通过Facebook、Instagram和LinkedIn API自动发布内容，功能整体正常，但从Next.js应用发布时，Emoji在Facebook和Instagram上无法正常渲染，显示为乱码字符。

效果对比 #

• Next.js应用内发布时的渲染效果：
  
• Facebook上的显示效果：
  

问题原因分析 #

查看发布逻辑代码，核心问题出在handlePost函数对caption的编码处理：

const encodedCaption = escape(captionValue);

escape()是JavaScript旧版编码函数，仅能正确处理ASCII范围内的字符。对于Emoji这类Unicode字符，它会生成不符合标准的转义序列，导致Facebook和Instagram API无法正确解析，最终显示为乱码。而LinkedIn发布时直接使用原始captionValue，未经过escape()处理，所以Emoji能正常渲染。

解决方案 #

将escape()替换为encodeURIComponent()，该函数支持完整Unicode字符编码，可正确处理Emoji等非ASCII字符：

修改后的关键代码片段 #

const handlePost = async () => {
    setIsPosting(true);
    const { access_token, page_id, page_name } = selectedProfile;
    // 替换escape为encodeURIComponent，适配Unicode字符
    const encodedCaption = encodeURIComponent(captionValue);
    const imageSrc = customMediaUrl
        ? encodeURI(customMediaUrl as string)
        : post.node.featuredPost.postimage.mediaItemUrl;

    // 其余发布逻辑保持不变
    if (selectedProfile?.platform === 'linkedin') {
        await handleLinkedinPost(
            selectedProfile,
            captionValue,
            preparedCaption,
            preparedHashtags,
            captionChoice,
            isScheduled,
            utcTime,
            imageSrc
        );
        return setIsPosting(false);
    }

    if (selectedProfile?.platform === 'instagram') {
        await handleInstagramPost(
            selectedProfile,
            encodedCaption,
            imageSrc,
            isScheduled,
            utcTime
        );
        return setIsPosting(false);
    }

    if (isScheduled) {
        await handleScheduledFacebookPost(
            page_id,
            access_token,
            encodedCaption,
            utcTime,
            page_name,
            imageSrc
        );
        return setIsPosting(false);
    }

    await handleFacebookPost(page_id, access_token, encodedCaption, imageSrc);
    setIsPosting(false);
};

补充优化方案 #

若Facebook/Instagram API支持直接接收Unicode字符串，也可省略编码步骤，直接传递原始captionValue：

// 直接使用原始caption值，无需编码
await handleInstagramPost(
    selectedProfile,
    captionValue,
    imageSrc,
    isScheduled,
    utcTime
);

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