📝 ส่ง Dictionary จากฟอร์มขึ้น Firestore อย่างปลอดภัย (Client‑Side Write)

เมื่อคุณมีฟอร์มที่รวบรวมข้อมูลเป็น object (เช่น contact form หรือ registration form) คุณสามารถส่งข้อมูลนี้ขึ้น Firestore ได้อย่างปลอดภัยผ่านฟังก์ชัน addDoc(...) โดยมีแนวปฏิบัติที่ดีเพื่อป้องกันข้อผิดพลาดหรือปัญหาความปลอดภัย

---

✅ ตัวอย่างฟอร์มเก็บข้อมูลแบบ Dictionary

'use client';
import { useState } from 'react';
import { addDoc, collection } from 'firebase/firestore';
import { db } from '@/lib/firebaseClient';

export default function ContactForm() {
  const [formData, setFormData] = useState({ name: '', email: '', message: '' });
  const [status, setStatus] = useState(null);

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();

    // ✅ Basic validation
    if (!formData.name || !formData.email || !formData.message) {
      setStatus('กรุณากรอกข้อมูลให้ครบ');
      return;
    }

    try {
      await addDoc(collection(db, 'contacts'), formData);
      setStatus('✅ ส่งข้อมูลสำเร็จ!');
      setFormData({ name: '', email: '', message: '' });
    } catch (err) {
      console.error('❌ Firestore Error:', err);
      setStatus('❌ เกิดข้อผิดพลาดในการส่งข้อมูล');
    }
  };

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      <input type="text" name="name" placeholder="ชื่อ" value={formData.name} onChange={handleChange} required />
      <input type="email" name="email" placeholder="อีเมล" value={formData.email} onChange={handleChange} required />
      <textarea name="message" placeholder="ข้อความ" value={formData.message} onChange={handleChange} required />
      <button type="submit">ส่ง</button>
      {status && <p>{status}</p>}
    </form>
  );
}

---

⚠️ จุดสำคัญที่ควรระวัง

• อย่าเรียก Firebase ตรงจาก Event Handler หลายครั้ง

  • ใส่ debounce หรือ disabled ปุ่ม submit ชั่วคราวเพื่อป้องกันการคลิกซ้ำเร็ว ๆ

• อย่าเก็บ key ลับในฝั่ง Client

  • อย่าใช้ค่าเช่น Service Account, admin credentials หรือ private key ฝั่ง client

• validate ค่าที่รับจาก form เสมอ

  • อย่างน้อย required และตรวจสอบชนิดข้อมูล เช่น email, phone, ฯลฯ

---

🎉 ตัวอย่างผลลัพธ์หลัง submit

[กรณีสำเร็จ]
✅ ส่งข้อมูลสำเร็จ!

[กรณีล้มเหลว]
❌ เกิดข้อผิดพลาดในการส่งข้อมูล
หรือ
กรุณากรอกข้อมูลให้ครบ

---

บทความนี้ช่วยให้คุณส่งข้อมูลจากแบบฟอร์มขึ้น Firestore ได้อย่างปลอดภัย ใช้งานง่าย และให้ประสบการณ์ที่ดีแก่ผู้ใช้ หากต้องการขยายระบบให้รองรับฟอร์มหลายแบบหรือหลาย collection แนะนำให้แยก logic เข้าสู่ Service Layer เพิ่มเติม