NextJS+MongoDB项目处理用户创建时间时TypeError问题解决

原因分析 #

• 页面初始渲染时，用户数据（user）尚未完成加载，user?.user?.createdAt返回undefined，此时对born变量直接调用substring()/slice()会触发类型错误。控制台打印正常是因为打印操作在数据加载完成后执行，而渲染会先处理无数据的初始状态。
• 若useState未给born设置初始默认值，变量初始状态为undefined，调用字符串方法必然报错。

解决方法 #

1. 渲染阶段增加空值判断 #

在渲染截取后的日期时，先确认born存在再调用方法：

{born && born.substring(0, 10)}
// 或用可选链简化
{born?.substring(0, 10)}

2. 给useState设置初始空字符串 #

初始化born时赋值为空字符串，避免初始状态为undefined：

const [born, setBorn] = useState('');

// 监听user数据变化，加载完成后再赋值
useEffect(() => {
  if (user?.user?.createdAt) {
    setBorn(user.user.createdAt);
  }
}, [user]);

3. 赋值时直接完成截取并处理空值 #

在获取createdAt的同时完成截取，同时处理可能的空值情况：

const [born, setBorn] = useState('');

useEffect(() => {
  const createdAt = user?.user?.createdAt;
  setBorn(createdAt ? createdAt.slice(0, 10) : '');
}, [user]);

4. 直接在渲染层处理（无需额外state） #

跳过born状态变量，直接在渲染时处理日期，结合可选链和空值合并：

{user?.user?.createdAt?.slice(0, 10) || '暂无创建日期'}

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