将ReactJS/Redux Toolkit转TypeScript时状态属性访问报错

核心原因 #

你遇到的类型错误根源在于**Note | {}这个类型定义的歧义**：

• TypeScript会把{}理解为“任何非null/undefined的对象”，但空对象本身并没有id、files这些Note接口里的属性。当你声明note的类型是Note | {}时，TS无法确定当前拿到的note到底是完整的Note对象，还是一个空对象（或者其他不包含目标属性的对象），所以会严格禁止访问那些可能不存在的属性，避免运行时错误。
• 另外，初始值设为空对象也和Note接口不兼容——Note接口里的id、files应该是必填属性，空对象完全不满足这些要求，这进一步加剧了TS的类型推断混乱。

解决步骤 #

1. 修正类型定义 #

把NoteState里note的类型改成Note | undefined或者Note | null，这两种类型能更准确表达“当前没有note数据”的状态，比{}更符合业务逻辑：

interface NoteState {
  note: Note | undefined;
}

2. 调整初始值 #

将初始状态的note设为undefined或null，和修正后的类型匹配：

const initialState: NoteState = {
  note: undefined
};

3. 在Hook中处理空状态 #

访问note属性前，先通过可选链（?.）或条件判断确保note存在：

// 使用可选链
const noteId = note?.id;
const files = note?.files?.map(file => file.filename);

// 或者条件判断
if (note) {
  const noteId = note.id;
  const filenames = note.files.map(file => file.filename);
}

（可选）如果必须保留Note | {}类型 #

可以自定义类型守卫来明确区分Note对象和空对象：

function isNote(note: Note | {}): note is Note {
  return typeof note === 'object' && note !== null && 'id' in note && 'files' in note;
}

// 在Hook中使用
if (isNote(note)) {
  // 这里TS会确定note是Note类型，可以安全访问属性
  console.log(note.id, note.files[0].filename);
}

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