Next.js教程中使用date-fns遇RangeError: Invalid time value问题求助

错误原因 #

RangeError: Invalid time value 是因为传给parseISO的dateString不是有效的ISO 8601格式日期字符串，或者值为undefined/null，导致解析后得到无效时间对象，传给format时触发报错。

排查与解决步骤 #

• 检查传入的dateString值：确认传给Date组件的dateString是否为标准ISO格式（例如"2024-05-20T14:30:00Z"），排查是否存在undefined、null或非标准格式（如"2024/05/20"这种斜杠分隔的格式，parseISO不支持）。
• 添加容错处理：在组件中增加值校验和异常捕获，避免无效值导致崩溃，修改后的代码如下：

import { parseISO, format } from 'date-fns'

export default function Date({ dateString }) {
  // 先判断dateString是否存在
  if (!dateString) return <span>无日期</span>
  
  try {
    const date = parseISO(dateString)
    return <time dateTime={dateString}>{format(date, 'LLLL d, yyyy')}</time>
  } catch (err) {
    // 捕获解析失败的情况
    return <span>日期格式错误</span>
  }
}

• 校验数据源：如果dateString来自API或静态数据文件，检查数据源中的日期格式是否符合ISO 8601标准，必要时在数据源头转换格式。

内容的提问来源于stack exchange，提问作者Vicente Antonio G. Reyes