如何在getServerSideProps中为变量正确赋值SQL查询返回的数据？

问题原因 #

你当前的代码存在异步执行顺序问题：db.query是基于回调的异步操作，getServerSideProps会在回调函数执行前就执行return { props: { decks } }，此时decks还是初始的空数组，根本没拿到数据库返回的结果。

解决方案 #

方案1：将回调式查询封装为Promise #

通过Promise封装db.query，配合async/await等待查询完成后再赋值返回：

export async function getServerSideProps(context) {
  let decks = [];

  // 封装db.query为Promise
  const fetchDecks = new Promise((resolve, reject) => {
    // 使用参数化查询避免SQL注入风险
    db.query(
      `SELECT * FROM decks WHERE user = ?`,
      [context.params.userID],
      (err, res) => {
        if (err) reject(err);
        else resolve(res);
      }
    );
  });

  try {
    // 等待查询结果
    decks = await fetchDecks;
  } catch (err) {
    console.error('查询出错:', err);
  }

  return { props: { decks } };
}

方案2：使用支持Promise的数据库驱动 #

如果你的数据库驱动支持Promise（比如mysql2/promise），可以直接用await简化代码：

// 假设已引入支持Promise的驱动，例如mysql2/promise
export async function getServerSideProps(context) {
  let decks = [];

  try {
    // 参数化查询，安全获取数据
    const [rows] = await db.query(
      `SELECT * FROM decks WHERE user = ?`,
      [context.params.userID]
    );
    decks = rows;
  } catch (err) {
    console.error('查询出错:', err);
  }

  return { props: { decks } };
}

关键注意事项 #

• 必须等待异步操作完成：回调模式下代码不阻塞，必须用Promise+await确保拿到数据后再返回props。
• 避免SQL注入：绝对不要直接将用户输入（比如context.params.userID）拼接进SQL语句，使用参数化查询（?占位符+参数数组）是安全的做法。

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