React连接Firestore测试应用时遭遇两类错误的技术求助

嗨，我来帮你拆解这两个问题，都是React集成Firestore时很常见的坑：

第一个错误：TypeScript类型声明缺失（ts(7016)） #

这个错误是因为TypeScript没法识别你的firestore.js文件的类型，默认把它当成了any类型，所以会抛出警告。解决方法有几种，你可以选适合自己的：

• 方法1：把JS文件改成TS文件
  直接把firestore.js重命名为firestore.ts，TypeScript就能自动识别Firebase导出的db类型，不需要额外配置。
• 方法2：添加类型声明文件
  如果不想改文件名，在config文件夹下新建一个firestore.d.ts文件，内容如下：

  declare module './firestore' {
    import { Firestore } from 'firebase/firestore';
    export const db: Firestore;
  }
  

  这样TS就能知道db的具体类型了。
• 方法3：放松TS对JS文件的检查
  在你的tsconfig.json里修改这两个配置：

  {
    "compilerOptions": {
      "allowJs": true,
      "checkJs": false
    }
  }
  

  这个方法比较快捷，但会关闭TS对JS文件的类型检查，适合临时调试用。

第二个错误：process is not defined #

这个问题是因为现在的React构建工具（比如Vite、新版Create React App）已经不再默认在浏览器环境中注入process对象了，所以直接用process.env.REACT_APP_*会找不到这个变量。解决分两种情况：

• 如果你用的是Create React App（旧版本）
  1. 确保你的.env文件放在项目根目录，并且所有环境变量都以REACT_APP_开头（比如REACT_APP_API_KEY）；
  2. 安装dotenv依赖（如果没装的话：npm install dotenv --save-dev）；
  3. 必须重启你的开发服务器，CRA不会自动重新加载.env文件的修改。
• 如果你用的是Vite
  Vite用的是import.meta.env而不是process.env，所以要修改两个地方：
  1. 把.env里的变量名改成VITE_APP_开头（比如VITE_APP_API_KEY）；
  2. 修改firestore.js里的firebaseConfig：

     const firebaseConfig = {
       apiKey: import.meta.env.VITE_APP_API_KEY,
       authDomain: import.meta.env.VITE_APP_AUTH_DOMAIN,
       projectId: import.meta.env.VITE_APP_PROJECT_ID,
       storageBucket: import.meta.env.VITE_APP_STORAGE_BUCKET,
       messagingSenderId: import.meta.env.VITE_APP_MESSAGING_SENDER_ID,
       appId: import.meta.env.VITE_APP_APP_ID,
       measurementId: import.meta.env.VITE_APP_MEASUREMENT_ID,
     };
     

  同样要重启Vite开发服务器才能生效。

额外提醒：你的组件代码还有异步处理问题 #

getDocs是异步函数，你直接赋值const querySnapshot = getDocs(...)得到的是一个Promise对象，没法直接用数据。建议用async/await配合useEffect来处理：

import { useEffect } from 'react';
import { collection, getDocs } from "firebase/firestore";
import { db } from "./config/firestore";

export default function MyAlerts() {
  const fetchAlerts = async () => {
    try {
      const querySnapshot = await getDocs(collection(db, "myAlerts"));
      // 处理获取到的数据
      querySnapshot.forEach((doc) => {
        console.log(`${doc.id} =>`, doc.data());
      });
    } catch (error) {
      console.error("获取数据失败：", error);
    }
  };

  useEffect(() => {
    fetchAlerts();
  }, []);

  return <div>我的告警列表</div>;
}

备注：内容来源于stack exchange，提问作者Danny Web