Svelte组件在if块内无法渲染，需额外内容才显示的问题求助

以下是相关代码：

主组件代码 #

<script lang="ts">
    import Social from './social.svelte';
    import GithubSolid from 'flowbite-svelte-icons/GithubSolid.svelte';
    import YoutubeSolid from 'flowbite-svelte-icons/YoutubeSolid.svelte';
    import { socialMediaLinks, type SocialMedias } from './index';

    let medias = Object.keys(socialMediaLinks) as SocialMedias[];
</script>

{#snippet rc(Comp)}
    <Comp size="10" />
{/snippet}

<div>
    <div class="flex flex-row justify-between">
        {#each medias as media}
            <Social hrefLink={socialMediaLinks[media]}>
                {#if media === 'youtube'}
                    <!-- <p>Youtube</p> -->
                    {@render rc(YoutubeSolid)}
                {:else if media === 'github'}
                    {@render rc(GithubSolid)}
                {/if}
            </Social>
        {/each}
    </div>
</div>

socialMediaLinks 定义 #

export const socialMediaLinks = {
    github: 'https://github.com/saralio',
    youtube: 'https://youtube.com/@data_questin',
    linkedin: 'https://linkedin.com/in/saralio'
};

export type SocialMedias = keyof typeof socialMediaLinks;

Social 组件代码 #

<script lang="ts">
    import type { Snippet } from 'svelte';

    type Props = {
        hrefLink: string;
        children: Snippet;
    };

    let { hrefLink, children }: Props = $props();
</script>

<div>
    <a href={hrefLink} target="_blank" rel="noopener noreferrer">
        {@render children()}
    </a>
</div>

问题现象 #

• 仅当if分支内加入注释或其他内容时，图标才会显示；移除注释后图标完全不显示。
• 将图标组件直接放在each循环外时，能正常渲染。

核心问题是Svelte编译器在循环内的条件分支中，仅存在{@render rc(Comp)}时，会误判分支无实际内容，导致图标组件未被正确实例化。可以用以下几种方法解决：

方法1：给snippet渲染添加容器元素 #

把图标组件包裹在一个空的<span>或<div>中，让编译器识别到分支有内容：

{#if media === 'youtube'}
    <span>{@render rc(YoutubeSolid)}</span>
{:else if media === 'github'}
    <span>{@render rc(GithubSolid)}</span>
{/if}

方法2：直接渲染组件，跳过snippet #

既然snippet只是给组件传递size属性，不如直接在条件分支中写组件标签，绕开snippet的编译问题：

{#if media === 'youtube'}
    <YoutubeSolid size="10" />
{:else if media === 'github'}
    <GithubSolid size="10" />
{/if}

方法3：处理未覆盖的media分支 #

medias数组包含linkedin，但当前条件分支未处理该情况，会导致对应<Social>组件的children为空。虽不是图标不显示的直接原因，但建议补上：

// 只保留需要的media，过滤linkedin
let medias = ['github', 'youtube'] as SocialMedias[];

或者添加默认分支：

{#if media === 'youtube'}
    <YoutubeSolid size="10" />
{:else if media === 'github'}
    <GithubSolid size="10" />
{:else}
    <!-- 这里可以留空或添加linkedin图标 -->
{/if}

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