Next.js(TypeScript)中string类型无法赋值给Message类型的报错解决

1. 解决TypeScript类型不匹配报错 #

你现在的核心类型错误是：最后返回的字符串"newMessage"不符合Data类型中message: Message的要求，同时从req.body获取的message未做类型断言，TypeScript无法确认其类型。

直接修改API路由代码即可解决：

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from 'next'
import redis from '../../redis';
import { Message }  from '../../typings';

type Data = {
    message: Message;
}

type ErrorData = {
    body: string
}

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data | ErrorData>
) {
    if(req.method !== 'POST') {
        res.status(405).json({ body: "Method Not Allowed" });
        return;
    }

    // 给req.body的message添加类型断言，明确其为Message类型
    const message = req.body.message as Message;

    // 标注newMessage的类型为Message，避免类型推导出错
    const newMessage: Message = {
        ...message,
        // 替换为服务器生成的时间戳
        created_at: Date.now(),
    };

    try {
        // 将消息存入Upstash Redis，使用newMessage的id作为键
        await redis.hset("messages", newMessage.id, JSON.stringify(newMessage));
        
        // 返回正确的Message类型数据，而非字符串
        res.status(200).json({ message: newMessage });
    } catch (error) {
        // 捕获Redis操作异常，确保返回错误响应，避免请求挂起
        res.status(500).json({ body: `保存消息失败：${(error as Error).message}` });
    }
}

2. 解决前端异步响应报错 #

这个报错的本质是API路由未正常返回响应——比如Redis操作抛出异常但未被捕获，导致函数终止，前端请求通道因超时关闭。

上面的代码通过try/catch块确保了无论操作成功还是失败，都会返回HTTP响应，直接解决这个问题。同时可以额外检查两点：

• 核对Upstash Redis的连接配置，确保redis实例使用了正确的URL和API密钥（可在Upstash控制台的Connect页面获取标准Node.js配置代码）
• 确认前端发送请求时，请求体的message字段包含Message类型要求的所有属性：id、message、username、profilePic、email，属性缺失会导致后端处理异常

额外检查项 #

• 确保typings.d.ts文件被TypeScript识别，可在tsconfig.json的include数组中添加**/*.d.ts
• 存Redis时使用newMessage.id而非原message.id，逻辑上更严谨（两者值一致，但避免原数据id被篡改的风险）

内容的提问来源于stack exchange，提问作者Syed Laeeq Ahmed