使用Liveblocks时调用LiveObject.set()报TypeError问题求助

核心问题分析 #

你遇到的错误本质是storage.get("centralCard")返回的并非LiveObject实例，因此不存在set方法。问题出在LiveObject初始化写法错误，以及类型断言可能存在的偏差。

修复步骤 #

1. 修正RoomProvider中的LiveObject初始化代码 #

你的初始化代码错误地将具体值放在了泛型参数中，而没有传递给LiveObject构造函数。正确的写法是将初始数据作为构造函数参数传入：

<RoomProvider
  id='testRoomId'
  initialStorage={{
    // 正确写法：构造函数传入初始值对象，泛型用于定义类型（可选，可由config自动推断）
    centralCard: new LiveObject({
      color: 'blue',
      value: '4'
    }),
  }}>
  <ClientSideSuspense fallback={<div>Loading…</div>}> 
    <Room />
  </ClientSideSuspense> 
</RoomProvider>

2. 确保liveblocks.config.ts的类型配置正确 #

确认配置文件中正确导入LiveObject并定义Storage结构：

// liveblocks.config.ts
import { LiveObject, LiveblocksConfig } from "@liveblocks/client";

export const config = {
  Storage: {
    centralCard: LiveObject<{
      color: string;
      value: string;
    }>,
  },
} satisfies LiveblocksConfig;

3. 优化useMutation中的类型安全（可选） #

利用Liveblocks的类型推断，无需手动断言，同时可以增加实例检查避免错误：

const updateCentralCard = useMutation(({ storage }, newCard: Card) => {
  const thisCentralCard = storage.get("centralCard");
  
  // 安全检查：确保获取到的是LiveObject实例
  if (!(thisCentralCard instanceof LiveObject)) {
    throw new Error("centralCard must be a LiveObject");
  }
  
  thisCentralCard.set("color", newCard.color);
  thisCentralCard.set("value", newCard.value);
}, []);

错误原因说明 #

你之前的初始化代码new LiveObject<{color: 'blue', value: '4'}>存在两个关键问题：

• 泛型参数的作用是定义类型约束，而非传入具体的初始值；
• LiveObject构造函数必须接收初始数据对象作为参数，否则会创建一个不符合预期的空实例，导致后续无法调用set方法。

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