getStaticProps双数据库查询返回props时一个值为null的问题

核心原因 #

1. mysql query的异步处理不规范：虽然mysql的Query对象支持thenable接口，但直接用Promise.all包裹未标准化的异步操作，可能导致结果结构在传递时出现隐性异常。
2. Next.js的props序列化限制：getStaticProps返回的props会被自动序列化为JSON格式，若ucp_config的查询结果包含不可序列化类型（比如Buffer、函数、Symbol等），这类字段会被强制转为null，最终导致客户端拿到的config为null。

解决步骤 #

1. 标准化Promise化查询方法 #

用Node.js内置的util.promisify将query方法转为标准Promise，避免异步处理的隐性问题：

import { promisify } from 'util';

export const getStaticProps = async (ctx) => {
  const dbConnection = await mysql.createConnection({
    host: process.env.DB_HOST,
    database: process.env.DB_DATABASE,
    user: process.env.DB_USER,
    password: process.env.DB_PASSWORD,
    socketPath: process.env.DB_SOCKET
  });
  
  // 把query转成标准Promise版本，绑定连接上下文
  const query = promisify(dbConnection.query).bind(dbConnection);

  // 直接await获取查询结果
  const newsRows = await query(`SELECT * FROM ucp_news`);
  const configRows = await query(`SELECT * FROM ucp_config`);

  // 确保取到有效数据，避免空数组导致的错误
  const config = configRows.length > 0 ? configRows[0] : null;

  dbConnection.destroy();
  return {
    props: {
      news: newsRows,
      config: config
    }
  }
}

2. 检查并处理不可序列化字段 #

在返回props前，排查config数据中的特殊类型字段，将其转换为可序列化格式。比如存在Buffer类型字段时：

const rawConfig = configRows[0];
const config = {
  ...rawConfig,
  // 将Buffer转为base64字符串
  cover_image: rawConfig.cover_image ? rawConfig.cover_image.toString('base64') : null
};

3. 验证数据结构 #

在getStaticProps中打印完整的查询结果，确认数据类型符合预期：

console.log('原始config数据:', configRows[0]);
console.log('数据类型:', typeof configRows[0]);
console.log('是否包含不可序列化字段:', Object.keys(configRows[0]).some(key => 
  typeof configRows[0][key] === 'object' && !(configRows[0][key] instanceof Array || configRows[0][key] === null)
));

额外注意 #

• 确保在所有查询完成后再调用dbConnection.destroy()，避免连接提前断开导致的查询中断。
• 如果使用的是mysql2包，它本身支持query方法直接返回Promise，无需手动promisify，直接await dbConnection.query()即可。

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