SvelteKit中条件HTML渲染未按预期工作

你的问题核心是条件判断没有覆盖JSON属性可能的空值场景，导致逻辑不符合预期。

为什么原代码失效？ #

1. 若JSON中contactUs属性不存在（值为undefined），或者值为null，此时socialMediaLinks["contactUs"] !== ""的结果是true——因为undefined/null和空字符串""并不相等，所以会错误显示标题。
2. 反过来写=== ""时，只有当属性值严格等于空字符串才会触发，但如果属性是有效链接、undefined或null，条件都不成立，自然不会显示内容。

修复方案 #

优化条件判断，覆盖所有无效值场景（空字符串、undefined、null、纯空格字符串）：

{#if socialMediaLinks?.contactUs?.trim()}
  <a href={socialMediaLinks.contactUs}>
    <h2>Contact Us</h2>
  </a>
{/if}

关键说明 #

• ?.是可选链操作符，避免socialMediaLinks本身为undefined/null时抛出错误；
• .trim()用于排除纯空格的无效链接（比如JSON里写了" "这种情况）；
• 直接用if (值)的逻辑，会自动将空字符串、undefined、null等假值判定为不满足条件，刚好符合你的需求。

额外排查步骤 #

可以先在组件里打印socialMediaLinks的实际值，确认JSON解析和属性读取是否正常：

console.log('socialMediaLinks:', socialMediaLinks);

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