SvelteKit无法在客户端展示MongoDB游戏数据问题求助

核心问题定位 #

服务端能获取并打印数据，但客户端拿不到目标字段，大概率是Mongoose文档序列化问题或数据传递/字段匹配问题，以下是针对性解决方案：

1. 服务端：将Mongoose文档转为纯JS对象 #

Mongoose查询返回的是Document实例，而非普通JSON对象，其中部分字段（如_id、嵌套字段）可能不可枚举，导致客户端无法读取。

修改+page.server.ts的load函数：

export async function load({ locals }) {
  // 方案1：用lean()直接返回纯JS对象（推荐）
  const user = await User_Model.findById(locals.user.id).lean();

  // 方案2：如果lean()不生效，用toObject()转换
  // const userDoc = await User_Model.findById(locals.user.id);
  // const user = userDoc.toObject({ getters: true }); // 启用getter，确保虚拟字段可访问

  console.log(user.games); // 验证结构
  return { user };
}

2. 检查Schema字段配置 #

确保User_Model中游戏相关字段未被隐藏：

// 子游戏Schema示例
const GameSubSchema = new mongoose.Schema({
  teams: { type: Array, required: true }, // 无select: false，确保可被查询
  data: { type: Object, required: true },
  // 若需要id字段而非默认的_id，添加配置
}, { id: true }); // 自动生成虚拟id字段（对应_id的字符串形式）

const UserSchema = new mongoose.Schema({
  games: [GameSubSchema],
  // 其他用户字段
});

3. 客户端：匹配字段结构与名称 #

在+page.svelte中验证数据结构，并确保字段名完全匹配：

<script>
  export let data;
  // 先打印数据，确认客户端实际拿到的结构
  console.log("客户端接收的游戏数据：", data.user.games);
  
  const { user } = data;
</script>

{#each user.games as game}
  <div class="game-item">
    <!-- 注意：Mongoose默认返回的是_id，若schema未配置id字段则用game._id -->
    <p>游戏ID：{game.id || game._id.toString()}</p>
    <p>队伍信息：{JSON.stringify(game.teams)}</p>
    <p>游戏数据：{JSON.stringify(game.data)}</p>
  </div>
{/each}

4. 额外排查点 #

• 检查字段大小写：服务端返回的是teams还是Teams，确保客户端使用的字段名完全一致
• 确认服务端load函数确实返回了user对象，且user.games数组不为空
• 若使用了类型定义，确保客户端的类型与服务端返回的数据结构匹配

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