Next.js项目RTK Query无法获取deadlineStart/End字段问题

核心原因：JavaScript中带连字符-的对象属性无法直接通过点语法访问，你遇到的问题和RTK Query请求逻辑无关，属于属性名映射错误导致的取值失败。

常见踩坑点与修复 #

• 类型声明字段不匹配
  不要在TS类型定义里直接把接口返回的deadline-start、deadline-end写成驼峰格式，带特殊字符的键需要加引号声明：

  // 错误写法
  interface ExamItem {
    id: number
    title: string
    deadlineStart: string // 和接口返回字段名不一致，取值必然为undefined
    deadlineEnd: string
  }
  
  // 正确写法
  interface ExamItem {
    id: number
    title: string
    'deadline-start': string
    'deadline-end': string
  }
  

• 传参/取值语法错误
  父组件遍历考试列表给ExamoCard传参时，不能直接用点语法取不存在的驼峰字段，要通过方括号语法匹配真实返回的字段名：

  // 错误传参
  <ExamoCard
    // 其余参数省略
    deadlineStart={exam.deadlineStart} // exam对象上没有这个属性
    deadlineEnd={exam.deadlineEnd}
  />
  
  // 正确传参
  <ExamoCard
    // 其余参数省略
    deadlineStart={exam['deadline-start']}
    deadlineEnd={exam['deadline-end']}
  />
  

  如果觉得方括号语法写起来繁琐，可以直接在RTK Query端点定义里加响应转换，把带连字符的字段转成驼峰后再返回给业务层使用，后续全链路统一用驼峰字段即可：

  // endpoints内的接口定义
  getExams: builder.query<ExamItem[], void>({
    query: () => '/api/exams',
    transformResponse: (rawList: Array<{
      id: number
      title: string
      'deadline-start': string
      'deadline-end': string
    }>) => {
      return rawList.map(item => ({
        ...item,
        deadlineStart: item['deadline-start'],
        deadlineEnd: item['deadline-end']
      }))
    }
  })
  

• 组件内取值语法错误
  不要在ExamoCard组件内写props.deadline-start这类语法，JS会把-识别为减法运算符直接抛语法错，如果你没有做字段转换，组件内取值也必须用props['deadline-start']的格式。

快速验证方法 #

拿到接口返回的单条exam对象后，直接在控制台执行console.log(exam['deadline-start'])，如果能正常打印出时间值，就可以确认是属性名映射/取值语法的问题，按上面的步骤修复即可。

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