为何在{#if}非空判断块内，selectedPopup.value仍会为null引发报错？

1. 状态更新与DOM销毁的时序差 #

Svelte的{#if}块会在条件不满足时销毁内部组件，但这个销毁过程并非同步阻塞。如果selectedPopup.value在Select组件渲染后被异步置为null（比如其他UI操作触发的状态变更），可能出现：DOM还没完全销毁，Select组件的双向绑定逻辑仍在尝试读取selectedPopup.value.attachedTo，此时就会触发null报错。

2. 双向绑定的隐式更新触发 #

bind:value={selectedPopup.value.attachedTo}属于深层属性绑定，当Select组件内部触发值更新时，会通过selectedPopup.value的引用去修改attachedTo。如果此时selectedPopup.value刚好被其他逻辑置为null，哪怕{#if}条件已经变为false，组件的解绑逻辑还没执行完毕，就会瞬间出现读取错误。

3. 状态竞态条件 #

修改selectedPopup.value的操作（比如其他UI元素的点击、异步回调）和Select组件的渲染/更新逻辑如果存在竞态，会出现短暂的状态不一致：{#if}判断时value还存在，但绑定执行时value已经被置空。

• 添加可选链保护：把绑定表达式改为bind:value={selectedPopup.value?.attachedTo}，即使value为null也不会触发报错，同时不影响正常绑定逻辑。
• 缓存当前状态：在{#if}块内部先缓存selectedPopup.value，避免后续状态变化影响绑定：

  {#if selectedPopup.value}
      {const currentPopupValue = selectedPopup.value}
      <Select.Root type="single" bind:value={currentPopupValue.attachedTo} allowDeselect={true}>
          <!-- 其余组件代码保持不变 -->
      </Select.Root>
  {/if}
  

• 手动控制组件销毁（进阶）：给Select组件添加bind:this，在selectedPopup.value变为null时主动清理绑定逻辑，不过这种方式相对复杂，优先推荐前两种方案。

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