Nextjs Blog App部署AWS Amplify后创建帖子出现客户端异常错误

核心问题原因 #

1. 语法错误问题 #

create-post.js中useState使用错误，React的useState仅返回2个参数，你写了3个参数接收返回值：

// 错误写法
const [post, setPost, state] = useState(initialState)

第三个参数state为undefined，本地开发环境React的错误容忍度较高不会触发崩溃，但线上打包压缩后会触发不可预期的渲染异常。

2. 数据一致性问题 #

DynamoDB为最终一致性数据库，你提交新帖子后立即跳转查询，线上环境网络延迟更高，可能出现数据还未落库就触发详情页查询，导致getStaticProps拿到的post为null。

3. 权限配置问题 #

详情页的getStaticProps运行在Next.js服务端，使用AWS Amplify部署角色调用AppSync的getPost接口，你本地开发时通常有管理员权限，线上部署角色如果没有配置getPost的调用权限，会导致查询失败返回空值。

4. 数据类型不匹配问题 #

DatePicker返回的值是Date对象，你直接存入DynamoDB，如果GraphQL Schema中date字段定义为String类型，线上序列化时可能出现异常，导致读取时post.date格式异常，new Date(post.date)调用失败触发渲染报错。

5. 空值未处理问题 #

详情页组件没有对post做判空处理，一旦post为null，直接访问post.title等属性会直接抛出异常，触发客户端崩溃。

修复步骤 #

1. 修复useState语法错误 #

将create-post.js中的错误声明改为：

const [post, setPost] = useState(initialState)

2. 新增空值判断与错误捕获 #

在[id].js中新增空值判断和getStaticProps的错误捕获：

export default function Post({ post }) {
    const router = useRouter()
    // 新增空值判断
    if (!post || router.isFallback) {
        return <div>Loading...</div>
    }
    // 其余原有代码
}

export async function getStaticProps ({ params }) {
  const { id } = params
  try {
    const postData = await API.graphql({
      query: getPost, variables: { id }
    })
    return {
      props: {
        post: postData.data.getPost
      },
      revalidate: 60
    }
  } catch (e) {
    // 查询失败返回404
    return {
      notFound: true
    }
  }
}

3. 调整跳转逻辑，避免最终一致性问题 #

创建帖子成功后增加延迟再跳转，确保数据落库，同时统一日期格式：

async function createNewPost() {
  if ( !title || !content || !category || !countries || !select || !date ||  !createdAt ) return
  const id = uuid() 
  post.id = id
  // 新增日期转ISO字符串逻辑，确保数据类型匹配
  post.date = new Date(post.date).toISOString()
  await API.graphql({
    query: createPost,
    variables: { input: post },
    authMode: "AMAZON_COGNITO_USER_POOLS"
  })
  // 增加1秒延迟再跳转
  setTimeout(() => {
    router.push(`/posts/${id}`)
  }, 1000)
}

4. 检查AWS权限配置 #

进入AWS AppSync控制台，找到对应的API，在「设置」-「默认授权模式」中确认：

• 开启了IAM授权，且Amplify部署角色拥有getPost、listPosts的查询权限
• 或者将getPost的GraphQL Auth规则配置为允许公共读取

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