在 React 应用中通过日期字符串计算年龄时，Firefox 返回 NaN 而 Chrome 正常，根本原因是错误地对已为字符串的日期值调用了 JSON.stringify()，导致日期格式被破坏（如 "2000-01-01" 变成 ""2000-01-01""），Firefox 严格解析失败，Chrome 则宽容兼容。
在 react 应用中通过日期字符串计算年龄时，firefox 返回 nan 而 chrome 正常，根本原因是错误地对已为字符串的日期值调用了 `json.stringify()`，导致日期格式被破坏（如 `"2000-01-01"` 变成 `""2000-01-01""`），firefox 严格解析失败，chrome 则宽容兼容。
问题核心在于 handleAgeSelect 函数中这行代码：
const computeAge = getAge(JSON.stringify(birthdateInput.current.value));
birthdateInput.current.value 本身就是一个标准的 ISO 格式字符串（例如 "2000-01-01"），直接传入 getAge 即可。而 JSON.stringify() 会将其转为带双引号的 JSON 字符串："\"2000-01-01\"", 即实际传入 new Date() 的是非法格式 ""2000-01-01""。Firefox 的 Date 构造函数对此类格式拒绝解析，返回 Invalid Date，后续 .getFullYear() 等方法调用返回 NaN；Chrome 虽能“尽力”解析部分畸形字符串，但属非标准行为，不可依赖。
✅ 正确写法（移除冗余 JSON.stringify）：
const handleAgeSelect = (e) => {
const value = birthdateInput.current.value;
setBirthdate(value);
console.log("Raw birth date:", value); // e.g. "2000-01-01"
const computeAge = getAge(value); // ✅ 直接传入字符串
console.log("Computed age:", computeAge);
setAge(computeAge);
};此外，建议增强 getAge 函数的健壮性，避免因无效日期输入导致静默失败：
function getAge(dateString) {
if (!dateString || typeof dateString !== 'string' || dateString.trim() === '') {
return null; // 或抛出错误、返回 0，按业务需求处理
}
const today = new Date("2022-12-31"); // ⚠️ 注意：此固定日期应替换为动态 `new Date()`
const birthDate = new Date(dateString);
// 验证日期有效性
if (isNaN(birthDate.getTime())) {
console.warn(`Invalid birth date: ${dateString}`);
return null;
}
let age = today.getFullYear() - birthDate.getFullYear();
const m = today.getMonth() - birthDate.getMonth();
if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
return age;
}? 关键注意事项：
- <input type="date"> 的 value 始终是 YYYY-MM-DD 字符串，无需且不应用 JSON.stringify 包装；
- 浏览器间 Date 解析差异是常见陷阱，Firefox 遵循规范更严格，应以 Firefox 行为为准进行开发；
- 生产环境建议使用 dayjs 或 date-fns 等成熟日期库替代手写逻辑，避免闰年、时区等边界问题；
- 示例中硬编码 new Date("2022-12-31") 仅用于测试，实际应使用 new Date() 获取当前日期。
通过移除多余序列化并加入基础校验，即可彻底解决 Firefox 下年龄计算返回 NaN 的问题，确保跨浏览器一致性与代码健壮性。
