SvelteKit传入store属性调用函数返回null问题

问题表现 #

• 组件顶层执行loadUserInfo()时，只要传入$user store的任意属性作为参数就会触发null值错误
• 完全相同的store属性放在handleClick点击事件函数中可正常运行，路由跳转逻辑无异常
  

相关代码 #

业务组件代码 #

<script>
import { loadUserInfo } from '../stores/usernameStore.js';
import { user } from '../stores/sessionStore.js';
import { goto } from '$app/navigation';

// 顶层直接调用会报错
loadUserInfo($user.id)

function handleClick() {
    // 事件回调中使用完全正常
    goto('/user/' + $user.id);
}
</script>

loadUserInfo 函数实现 #

export const loadUserInfo = async (email) => {
    const { data, error } = await supabase.from('-----').select().eq('----', email )
    if (error) {
        return console.error(error);
    }
    username.set(data);
};

问题根源 #

store变量完全支持作为参数传入函数，该报错和传参逻辑无关，本质是代码执行时机的差异：

• 组件顶层代码会在组件初始化阶段立刻执行，此时sessionStore中存储的用户登录态还未完成异步加载，$user的初始值为null，直接读取null.id/null.email就会触发null引用错误
• 点击事件触发时，组件早已完成初始化，用户登录态也已经异步加载完毕，$user已经被赋值为正常的用户对象，此时读取属性自然不会报错

修复方案 #

• 用响应式语句+可选链做兜底，监听store值变化，等$user加载完成后再执行加载逻辑：

  // 替换原来的顶层直接调用
  $: if ($user?.id) {
      loadUserInfo($user.id)
  }
  

• 给user store设置非null的初始值（比如空对象{}），从根源避免初始化阶段读取null属性的问题
• 若逻辑不需要在组件初始化时立刻触发，也可以把调用放到onMount生命周期中执行，但仍建议保留空值校验逻辑做兜底

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